Option Value As Url In Select Dropdown
Solution 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.
Solution 2:
You can put the URLs to the pages as value attributes for the options. In the example below I used URLs to common websites, but you can use the URLs to the pages in your site.
<selectid="nav"><optionvalue="http://www.google.com">Google</option><optionvalue="http://www.ebay.com">eBay</option><optionvalue="http://www.amazon.com">Amazon</option></select>If you want to go to the URL that the user chooses when he changes the value in the dropdown you can do that using JavaScript. First, get the select element by its ID. Then, add an event listener which is the function that will execute when the value is changed. In that function set the user's browser to go to that URL.
document.getElementById("nav").addEventListener('change', function () {
window.location = this.value;
}, false);
You can see my example in action in this jsFiddle.
Solution 3:
For small displays select navigation menu emulated by <ul><li> - see twitter bootsrap or analog how it works.
Post a Comment for "Option Value As Url In Select Dropdown"