Question

I have a select list used as the main navigation for mobile visitors. The structure is as follows:

<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>

How can I check the current page url against those in the select list, and if one matches, set that as the selected option? I’m guessing it’s gonna be something kind of like this:

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

Answer 1

You can do it with jQuery attribute selectors:

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