Question

我有一个包含多个<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，那么它应该调用{{ 1}} JS函数。

任何正确方向的指针都会受到很多赞赏。

PS：这个问题可能与how to pass array values to JavaScript function from html onchange action?类似，但绝对不是我想要的。

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

Answer 1

在线演示：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>

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

您可以获取使用selectBox.id
您可以使用selectBox.value
您可以使用selectBox.selectedIndex
您可以使用selectBox.options[selectBox.selectedIndex].text

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

1 个答案: