HTML 选择选项值未更新

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 不会更新并将我选择的选项设置为所选选项。

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

这是绑定到表单上的提交事件的函数，以防您需要它：

$("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属性的选项（这通常是 HTML 中具有selected属性的selected ，尽管可以使用 Javascript 更改它）。

Answer 2

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

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

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