Question

我有一个HTML表单，其中包含以下select元素：

<select class="form-control" onchange="$('form#filter').submit()" id="sort" name="sort">
    <option value="0" selected="selected">A - Z</option>
    <option value="1">Z - A</option>
</select>

问题在于，当我选择其他选项时，HTML不会更新并将我选择的选项设置为所选选项。

我完全不知道为什么它没有更新，而且我已经在这几个小时了。

这是绑定到表单上的submit事件的函数，以备不时之需：

$("form#filter").on("submit", function(evt)
{
    var form = $(this);
    var target = $("div#bands");

    var url = form.attr("action") + "/" + form.find('option[selected]').val();
    console.log(url);

    $.get(url).done(function(data)
    {
        target.html(data);
    });

    evt.preventDefault();
});

Answer 1

更改

form.find("option[selected]").val()

到

form.find("option:selected").val()

或：

form.find("select").val()

或：

$("#sort").val()

选择器option[selected]找不到当前选中的选项，它找到DOM中具有selected属性的选项（通常是具有selected属性的选项在HTML中，尽管可以使用Javascript更改它。

Answer 2

接受的答案不正确。这是一个正确的解决方案（在撰写本文时，已在最新的JQuery和Bootstrap上进行了测试）：

$("#mySelect").find("option:selected").val();

感谢Barmar的启发，尽管4条建议中只有1条有效，而且只是偶然。但我对此进行了修改，以注销当前当前所选选项的正确值属性。（使用下拉菜单时 initial 选项的选定状态不会不更新，请参见Chris O'Kelly的评论。）

HTML选择选项值不更新

2 个答案: