在所有下拉列表的更改事件中，将所有下拉列表中的选定值放入url params中？

Question

I have three drop downs in mypage.php:

<select name='vehicle'>
  <option value=''>Select</option>
  <option value='bus'>Bus</option>
  <option value='bike'>Bike</option>
  <option value='car'>Car</option>
</select>

<select name='color'>
  <option value=''>Select</option>
  <option value='red'>Red</option>
  <option value='blue'>Blue</option>
  <option value='green'>Green</option>
</select>

<select name='cities'>
  <option value=''>Select</option>
  <option value='newyork'>New York</option>
  <option value='london'>London</option>
  <option value='paris'>Paris</option>
</select>

When I open page first time then in all dropdown 'Selected' option is selected.

Question:

When I select Bus from vehicle dropdown then url should be:

mypage.php?vehicle=bus

Then when I select Red from color dropdown then url should be:

mypage.php?vehicle=bus&color=red

Then when I select Paris from cities dropdown then url should be:

mypage.php?vehicle=bus&color=red&city=paris

Then I again select Car from vehicle then url should be:

mypage.php?vehicle=car&color=red&city=paris

Answer 1

Are you using a particular js framework? This behaviour is the standard form submit behaviour. You need to submit the form as a GET request in order to put the params in the actual URL, but as I say, any form submit will achieve this by default as that's the way GET form submits work.

In jQuery for instance you can trigger a form submit on select change using:

$(function(){
  $("#someFormId select").change(function(){
    $("#someFormId").submit();
  }
});

You form would be something like:

<form id="someFormId" name="myForm" action="/some/action" method="GET"> ... </form>