Option value as url in select dropdown

Question

I am using the following as my nav menu in a 320px viewport (iPhone for example)

  <select>
     <option value="#">Home</option>
     <option value="#">About</option>
     <option value="#">Products and Services</option>
     <option value="#">Markets</option>
     <option value="#">Case Studies</option>
     <option value="#">Markets</option>
     <option value="#">Partners</option>
     <option value="#">Contact Us</option>
     <option value="#">Careers</option>
     <option value="#">News</option>
  </select>

I want to set the value as a link to the corresponding page. How do I go about setting this, I have put the URL in as the value but it does not work. Am I even approaching this correctly?

Answer 1

If you use jQuery, you can do something like this:

$('select').change(function(){
    var url = $(this).val();
    window.location = url;
});

Add a change-event to (every) select element. When it it changed the function is run. The function takes the value from the newly selected option (in this case a url), and sets that url as the new location of the window.