1

我正在尝试从选择/选项中存储变量,然后从按钮访问它们以发送到一个 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>

但是如何存储所有选项的值,然后一次将它们全部发送到函数?

编辑:换句话说,我如何存储每个选项的值,并且只有在他们点击提交后才发送到函数?

4

2 回答 2

2

给每个选择一个 id 属性,例如:

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

然后你可以通过以下方式在javascript中获取每个值:

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

作为旁注,onchange在 HTML 标记中使用附加事件处理并不是最佳实践。 来自 quirksmode 的这篇文章很好地解释了替代解决方案。但是,需要考虑一些主要的跨浏览器注意事项,这就是为什么大多数人更喜欢使用 Javascript 框架,以便在很大程度上缓解这些问题。

于 2013-08-16T19:03:49.593 回答
2

如果我做对了,没有 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);
});

在这里摆弄这两个例子。

于 2013-08-16T19:10:08.887 回答