如何将数组从 HTML 传递到 Javascript

How to pass an array from HTML to Javascript?

本文关键字：Javascript HTML 数组      更新时间：2023-09-26

我有一个表单，其中包含多个<select>下拉框。我希望将这些下拉框中的值作为数组传递给 JavaScript 函数。

目前我的代码是这样的：

<select name="findByMaterial" onChange="filterFilms('Material',this.value)">
                    {% for film in all_films %}
                        <option value="{{film.f_material}}">{{film.f_material}}</option>
                    {% endfor %}
                    </select>

其中all_films是来自 Django 框架的变量(很可能你不需要关心它(。

我想做的是，即使我有多个具有不同名称的选择，例如 findByMaterial 和 findByColor ，并且我更改了findByColor，那么它应该调用 filterFilms(String,Value) JS 函数。

任何指向正确方向的指针都将不胜感激。

PS：这个问题可能类似于如何将数组值从html onchange操作传递给JavaScript函数？，但这绝对不是我要找的。

澄清：我想创建一个过滤器。因此，我希望能够访问color的属性以及material。

在线演示 ： http://jsfiddle.net/thefourtheye/jRym8/

<html lang = "en">
    <head>
        <title> Document </title>
        <script>
            function filterFilms(selectBox) {
                var displayArea = document.getElementById("displayArea");
                displayArea.innerHTML = selectBox.id + "," + selectBox.value + "," + selectBox.selectedIndex + "," +
                    selectBox.options[selectBox.selectedIndex].text;
            }
        </script>
    </head>
    <body>
        <select onchange="filterFilms(this);" id="films">
            <option value="film1">Film Text 1</option>
            <option value="film2">Film Text 2</option>
            <option value="film3">Film Text 3</option>
        </select>
        <select onchange="filterFilms(this);" id="colors">
            <option value="color1">Color 1</option>
            <option value="color2">Color 2</option>
            <option value="color3">Color 3</option>
        </select>
        <div id="displayArea"/>
    </body>
</html>

您可以使用相同的函数来执行此操作。将当前元素作为参数传递。和

  1. 您可以使用selectBox.id获取单击选择框的 ID
  2. 您可以使用selectBox.value获取所选选项的值
  3. 您可以使用selectBox.selectedIndex获取所选选项的索引
  4. 您可以使用selectBox.options[selectBox.selectedIndex].text获取所选选项的文本
相关文章：