I have a HTML form with the following select element in it:

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

The issue is that when I select a different option, the HTML doesn't update and set the option I chose as the selected option.

I have absolutely no idea why it isn't updating and I've been at it for hours now.

This is the function that is bound to the submit event on the form in case you need it:

$("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();
});

I have a HTML form with the following select element in it:

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

The issue is that when I select a different option, the HTML doesn't update and set the option I chose as the selected option.

I have absolutely no idea why it isn't updating and I've been at it for hours now.

This is the function that is bound to the submit event on the form in case you need it:

$("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();
});

• javascript
• jquery
• html

• when you console log url you got the right url for each select?? – Mohamed-Yousef Commented Nov 25, 2015 at 23:18
• Feels like I'm looking at 50% of the code. creating a jsfiddle would help me helping you – Endless Commented Nov 25, 2015 at 23:21
• Not 100% sure but try onchange="this.form.submit();" also .find('option:selected') – Marco Magrini Commented Nov 25, 2015 at 23:24

2 Answers 2

Change

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

to

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

or:

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

or:

$("#sort").val()

The selector option[selected] doesn't find the option that's currently selected, it finds the option that has the selected attribute in the DOM (this is normally the one with the selected attribute in the HTML, although it's possible to change it using Javascript).

The accepted answer is incorrect. Here is a correct solution (tested on latest JQuery and Bootstrap at time of writing):

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

Thanks to Barmar for the inspiration, though only 1 of the 4 suggestions works, and only by accident. But I adapted that to log out the correct value attribute for the currently selected option. (The selected state of the initial option does not update when using the dropdown, see Chris O'Kelly's ment.)