jquery - jQuery - 根据当前 url 检查导航选择列表 url 值并设置为选中

Question

我有一个选择列表用作移动访问者的主要导航。结构如下：

<select id="nav">
<option value="http://somesite.com/url_1">Page 1</option>
<option value="http://somesite.com/url_2">Page 2</option>
<option value="http://somesite.com/url_3">Page 3</option>
<option value="http://somesite.com/url_4">Page 4</option>
</select>

如何根据选择列表中的内容检查当前页面 url，如果匹配，则将其设置为选定选项？我猜它会是这样的：

var url = window.location;
$("#nav option").each(function() {
    var value = $(this).val();
    if(url === value) {
        $(this).val('selected','selected');
    };
});

Answer 1

selected是一个属性，你正在设置一个新的值，你可以使用prop和filter方法。

var url = window.location.href;
$("#nav option").filter(function() {
    return this.value === url;
}).prop('selected', true);

您也可以使用属性选择器，但filter方法更有效。

Answer 2

你应该改变

$(this).val('selected','selected');

进入

$(this).prop('selected',true);

所以最后（选项1）

$("#nav option").each(function() {
    if(window.location === $(this).val()) {
        $(this).val('selected','selected');
    };
});

或更简单（选项 2）

$("#nav option[value='" + document.location + "']").prop("selected", true);

Answer 3

您可以使用 jQuery 属性选择器来做到这一点：

$("#nav option[value='" + window.location + "']").prop('selected', true);