Html Dropdown submit form and keep option retain option values

Question

I am trying to create a simple dropdown box that filters a list into descending and ascending order.

The problem i am having is every time I submit the form or $_GET in this case the option I have selected in the drop down box resets.

I have used some php to change the selected option in the drop down but it isn't working and I am not sure why?

  <form name="query_form" method="get">
    <input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">


    <option name="asc"  <?php if($_GET['the_filter']=="asc"){echo "selected=\"true\""; }if($_GET['the_filter']=="desc"){echo "selected=\"false\"";} ?> value="asc" >Price: ascending</option>
    <option name="desc"  <?php if($_GET['the_filter']=="desc"){echo "selected=\"true\""; }if($_GET['the_filter']=="asc"){echo "selected=\"false\"";} ?> value="desc" >Price: descending</option>
    </select>
    </form>

when i check the source code it says shows this

 <form name="query_form" method="get">
    <input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">


    <option name="asc"  selected="true" value="asc" >Price: ascending</option>
    <option name="desc"  selected="false" value="desc" >Price: descending</option>
    </select>
    </form>

however the dropdown box remains on descending even though the selected is set to true for ascending, it seems to be changing afterwards is this something to do with the onchange method????

function Change(val) {

    document.query_form.query.value=val;
    document.query_form.submit();


}

thank you in advance for any help

Answer 1

Can you try this, added selected='selected' instead of selected='true' or 'false'

 <form name="query_form" method="get">
<input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">
        <option name="asc"  <?php if($_GET['the_filter']=="asc"){echo "selected='selected'"; } ?> value="asc" >Price: ascending</option>
        <option name="desc"  <?php if($_GET['the_filter']=="desc"){echo "selected='selected'"; } ?> value="desc" >Price: descending</option>
    </select>
</form>

Answer 2

Hope this will work perfectly,

  <form name="query_form" method="POST">
<input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">
        <option name="asc"  <?php echo ($_POST['the_filter'] == 'asc') ? ' selected="selected"' : ''; ?> value="asc" >Price: ascending</option>
        <option name="desc"   <?php echo ($_POST['the_filter'] == 'desc') ? ' selected="selected"' : ''; ?> value="desc" >Price: descending</option>
    </select>
</form>

Answer 3

This is happening because the php is producing broken HTML. It doesn't have to do with the javascript.

<form name="query_form" method="get">
    <input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">


    <option name="asc"  selected="selected" value="asc" >Price: ascending</option>
    <option name="desc" value="desc" >Price: descending</option>
    </select>
</form>

Notice how we are now using selected="selected"