0

我有一个包含多个<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 框架中的一个变量（很可能你不需要关心它）。

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

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

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

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

4

1 回答 1

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>

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

  1. 您可以获取单击的选择框的IDselectBox.id
  2. 您可以通过以下方式获取所选选项的值selectBox.value
  3. 您可以通过以下方式获取所选选项的索引selectBox.selectedIndex
  4. 您可以通过以下方式获取所选选项的文本selectBox.options[selectBox.selectedIndex].text
于 2013-10-13T05:45:05.280 回答