Two drop down lists form to get one url

Question

I would like to create two dropdown lists form, for example the first one would have "Advice A" and "Advice B" and the second one would have "Advice 1" and "Advice 2"

For example, a visitor would choose "Advice A" from the first dropdown list and "Advice 2" from the second dropdown list.

After clicking on the submit button, he would be redirected to http://www.domain.com/advice-a/advice-2/

How could i do this? I only found example code of list 1 which would modify list 2 on Google, which doesn't help me.

Answer 1

Here is an example, you can easily edit it to work with your specific options.

http://jsfiddle.net/joshlankford/ysx0js3c/

var getURL = function(){
    var option1 = document.getElementById('dropDown1').value;
    var option2 = document.getElementById('dropDown2').value;
    var URL = 'http://www.domain.com/' + option1 + '/' + option2;
    alert(URL);
}

<select id="dropDown1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select id="dropDown2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>  

<button onclick="getURL()">Run</button>

Answer 2

You can do this using java script or jquery. On click of submit call java script method.

function submitForm() {
   var valA = document.getElementById("listA").value;
   var val1 = document.getElementById("list1").value;
   document.getElementById("formId").action=valA+"/"+val1; // change this according to context root requirement.
   document.getElementById("formId").submit();
}