Question

<form method="get" action="">
   <select name="name" onchange='this.form.submit()'>
      <option value="a">a</option>
      <option value="b">b</option>
   </select>
   <select name="location" onchange='this.form.submit()'>
      <option value="x">x</option>
      <option value="y">y</option>
   </select>
</form>

I select option ‘a’ and it works fine, but then if I select ‘x’, ‘a’ value disappears from the URL, how do I retain all the values?

Edit: Also on submitting the form, how do I make sure that the selected values remain selected in the select menus as well?

Thanks

Answer 1

Submitting a form loads the target page into the window (in this case, the target page is same page you’re on). I would strongly recommend not submitting the form when the user selects an item from a list; that’s not what the user is going to expect to have happen.

But if you did it, you’ll have to keep track of the fields the user has chosen “so far” server-side, and then set the appropriate selected attribute on the option tag for the value they’d previously selected, e.g. when generating the form:

<option value='a' selected>a</option>

But again, best to let them make their selections and then submit the form with some kind of button. If you want to have the contents of lists change on the basis of the items they’ve chosen so far, you can use client-side JavaScript (possibly combined with an Ajax query to the server) to achieve that.