如何将数组从HTML传递到Javascript？_Javascript_Html

如何将数组从HTML传递到Javascript？

javascript html

如何将数组从HTML传递到Javascript？,javascript,html,Javascript,Html,我有一个表单，它有多个下拉框。我希望将这些下拉框中的值作为数组传递给JavaScript函数目前我的代码如下： <select name="findByMaterial" onChange="filterFilms('Material',this.value)"> {% for film in all_films %} <option value="{{film.f_material}}"

我有一个表单，它有多个

下拉框。我希望将这些下拉框中的值作为数组传递给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>


{所有电影中的电影%}
{{film.f_material}}
{%endfor%}

所有的电影都是Django框架的一个变量（很可能你不需要关心它）

我想做的是，即使我有多个具有不同名称的选项，例如

findByMaterial

和

findByColor

，并且我更改了

findByColor

，它也应该调用

filterFilms（字符串，值）

JS函数

任何指向正确方向的指针都将非常感激

PS：这个问题可能类似于，但绝对不是我想要的

澄清： 我想创建一个过滤器。因此，我希望能够访问

color

的属性以及

material

在线演示：


文件
功能过滤器Films（选择框）{
var displayArea=document.getElementById（“displayArea”）；
displayArea.innerHTML=selectBox.id+”，“+selectBox.value+”，“+selectBox.selectedIndex+”，”+
selectBox.options[selectBox.selectedIndex]。文本；
}
电影文本1
电影文本2
电影文本3
颜色1
颜色2
颜色3

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

使用

selectBox.id

您可以使用

selectBox.value

您可以使用

selectBox.selectedIndex

您可以使用

selectBox.options[selectBox.selectedIndex]获取所选选项的文本。text

因此，您想将同一事件附加到多个

s吗？是的，但传递不同的参数。这将按要求回答操作，做得好。我建议更进一步，将onChange事件从HTML中分离出来，并从脚本中附加它们。这看起来不错，但我确实需要发送我正在使用的select类型。这是因为有时两个不同选择的两个不同选项的值可能匹配。@SaketJain请检查我更新的答案。您可以使用

selectBox.id

@thefourtheye:谢谢！知道我如何同时访问

color

和

films

的属性吗？@SaketJain您可以使用

var colors=document.getElementById（“color”）

获取颜色选择框，然后可以使用

颜色

对象访问属性。

<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>