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

【问题标题】：How to pass an array from HTML to Javascript?如何将数组从 HTML 传递到 Javascript？
【发布时间】：2022-02-04 03:27:36
【问题描述】：

我有一个包含多个<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：这个问题可能和how to pass array values to JavaScript function from html onchange action?类似，但肯定不是我要找的。p>

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

【问题讨论】：

所以你想将同一个事件附加到多个<select>s 上？
可以，但是传递不同的参数。

标签： javascript html

【解决方案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获取点击的选择框的id
您可以通过selectBox.value 获取所选选项的值
您可以使用selectBox.selectedIndex 获取所选选项的索引
您可以使用selectBox.options[selectBox.selectedIndex].text 获取所选选项的文本

【讨论】：

这回答了 OP 的要求，做得好。我建议更进一步，将 onChange 事件与 HTML 分开，并将它们从脚本中附加。
这看起来不错，但我确实需要发送我正在使用的选择类型。这是因为有时两个不同选择的两个不同选项的值可能匹配。
@SaketJain 请检查我更新的答案。您可以使用selectBox.id 获取所选框的 id
@thefourtheye：谢谢！知道如何同时访问color 和films 的属性吗？
@SaketJain 您可以使用var colors = document.getElementById("color"); 获取颜色选择框，然后您可以使用colors 对象访问属性。