Put all dropdown selected values in url params on change event of any dropdown ?

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>

Answer 2

Something like this (using jquery to make selection easier)

var qs;
function checkSelections() {
qs = '';
$("select").change(function(x) {
 if ($(this).val.length > 0) {
   if (qs.length > 0) {
     qs += "&";
   }
   qs += $(this).attr("name").val() + "=" + $(this).val();
 }
});
// do something with qs when you are ready to set the url
window.location = /// whatever ///;
}

The above code probably contains lots of errors, but you should be able to get the idea.