Question

我正在尝试从select / option存储变量，然后从按钮访问它们以发送到javascript函数，该函数将过滤我页面上的一些div。

到目前为止，当值发生变化时，我将值发送到“filter（）”。这是我的标记：

<select name="Area" onchange="filter(this)">
    <option selected>Select</option>
    <option value="Austin">Austin</option>
    <option value="San Antonio">San Antonio</option>
    <option value="Temple">Temple</option>
</select>
<select name="Number" onchange="filter(this)">
    <option selected>Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<a class="button">Submit</a>

但是如何存储所有选项中的值，然后发送它们一下子就到了这个功能？

编辑：换句话说，如何存储每个选项的值，并且只有在单击提交后才发送给该功能？

Answer 1

如果我做对了，没有jQuery你可以试试这个：

document.getElementById("button").onclick = function() {
    var selects = document.body.getElementsByTagName("select");
    var data = [];

    for (var i = 0; i < selects.length; i++) {
        data.push(selects[i].value);
    }

    destinyFunction(data);
};

或者你可以为简单起见使用jQuery：

$("#jbutton").on("click", function() {
    var data = [];

    $("select").each(function() {
        data.push($(this).val());
    });

    destinyFunction(data);
});

摆弄这两个例子here。

Answer 2

为每个选择提供一个id属性，例如：

<select name="Number" onchange="filter(this)" id="Number">
...

然后你可以通过以下方式获取每个javascript的值：

var el = document.getElementById('Number');
var value = el.options[el.selectedIndex].value;

作为旁注，在HTML标记中使用onchange附加事件处理并非最佳做法。来自quirksmode的This article提供了替代解决方案的良好解释。但是，需要考虑主要的跨浏览器注意事项，这就是为什么大多数人更喜欢使用Javascript框架，以便大多数人都可以减轻这些因素。

如何将选项值传递给按钮

2 个答案: