Onchange open URL via select - jQuery
JqueryOnchangeJquery Problem Overview
What would be the best way to attach an event so on change of a select option a URL. Store the href in an attr and grab it on change?
Jquery Solutions
Solution 1 - Jquery
It is pretty simple, let's see a working example:
<select id="dynamic_select">
<option value="" selected>Pick a Website</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.youtube.com">YouTube</option>
<option value="https://www.gurustop.net">GuruStop.NET</option>
</select>
<script>
$(function(){
// bind change event to select
$('#dynamic_select').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
$(function() {
// bind change event to select
$('#dynamic_select').on('change', function() {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
<select id="dynamic_select">
<option value="" selected>Pick a Website</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.youtube.com">YouTube</option>
<option value="https://www.gurustop.net">GuruStop.NET</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
></script>
.
Remarks:
- The question specifies jQuery already. So, I'm keeping other alternatives out of this.
- In older versions of jQuery (< 1.7), you may want to replace
on
withbind
. - This is extracted from JavaScript tips in Meligy’s Web Developers Newsletter.
.
Solution 2 - Jquery
I think this is the simplest way:
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Pick one:</option>
<option value="/foo">Foo</option>
<option value="/bar">Bar</option>
</select>
Solution 3 - Jquery
You can use this simple code snippet using jQuery to redirect from a drop down menu.
<select id="dynamic-select">
<option value="" selected>Pick a Website</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.youtube.com/">YouTube</option>
<option value="http://www.stackoverflow.com/">Stack Overflow</option>
</select>
<script>
$('#dynamic-select').bind('change', function () { // bind change event to select
var url = $(this).val(); // get selected value
if (url != '') { // require a URL
window.location = url; // redirect
}
return false;
});
</script>
Solution 4 - Jquery
Sorry, but there's to much coding going on here ...
I'll give the simplest one to you for free. I invented it back in 2005, although the javascript source now says it was their staff who came up with it - more than a year later!
Anyway, here it is, no javascript !!!
<!-- Paste this code into the BODY section of your HTML document -->
<select size="1" name="jumpit" onchange="document.location.href=this.value">
<option selected value="">Make a Selection</option>
<option value="http://www.javascriptsource.com/">The JavaScript Source</option>
<option value="http://www.javascript.com">JavaScript.com</option>
<option value="http://www.webdeveloper.com/forum/forumdisplay.php?f=3">JavaScript Forums</option>
<option value="http://www.scriptsearch.com/">Script Search</option>
<option value="http://www.webreference.com/programming/javascript/diaries/">The JavaScript Diaries</option>
</select>
Just type in any URL you like, or a relative URL (to the pages location on server), it will always work.
Solution 5 - Jquery
Here's how i'd do it
<select id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();">
<option value="http://www.yadayadayada.com">Great Site</option>
<option value="http://www.stackoverflow.com">Better Site</option>
</select>
Solution 6 - Jquery
$('#userNav').change(function() {
window.location = $(':selected',this).attr('href')
});
<select id="userNav">
<option></option>
<option href="http://google.com">Goolge</option>
<option href="http://duckduckgo.com">Go Go duck</option>
</select>
This works for the href in an option that is selected
Solution 7 - Jquery
Super easy way is as following. No need to create a function.
<select onchange="window.location = this.options[this.selectedIndex].value">
<option value="">Switch Language</option>
<option value="{{ url('/en') }}">English</option>
<option value="{{ url('/ps') }}">پښتو</option>
<option value="{{ url('/fa') }}">دری</option>
</select>
Solution 8 - Jquery
Another way:
<script type="text/javascript">
function change_url(val) {
window.location=val;
}
</script>
<select style="width:130px;" onchange="change_url(this.value);">
<option value="http://www.url1.com">Option 1</option>
<option value="http://www.url2.com">Option 2</option>
</select>
Solution 9 - Jquery
I believe the simplest way to redefine a location inside select tab is as follows:
<select onchange="location = this.value;">
<option value="https://www.google.com/">Home</option>
<option value="https://www.bing.com">Contact</option>
<option value="mypets.php">Sitemap</option>
</select>
Solution 10 - Jquery
If you don't want the url to put it on option's value, i'll give u example :
<select class="abc">
<option value="0" href="hello">Hell</option>
<option value="1" href="dello">Dell</option>
<option value="2" href="cello">Cell</option>
</select>
$("select").bind('change',function(){
alert($(':selected',this).attr('href'));
})
Solution 11 - Jquery
<select name="xx" class="xxx" onchange="_name(this.options[this.selectedIndex].value,this.options[this.selectedIndex].getAttribute('rel'))">
<option value="x" rel="xy">aa</option>
<option value="xxx" rel="xyy">bb</option>
</select>
//for javascript
function _name(value,rel) {
alert(value+"-"+rel);
}
Solution 12 - Jquery
Try this code its working perfect
Solution 13 - Jquery
**redirect on change option with jquery**
<select id="selectnav1" class="selectnav">
<option value="#">Menu </option>
<option value=" https://www.google.com">
Google
</option>
<option value="http://stackoverflow.com/">
stackoverflow
</option>
</select>
<script type="text/javascript">
$(function () {
$('#selectnav1').change( function() {
location.href = $(this).val();
});
});
</script>
Solution 14 - Jquery
Try this code its working Firefox, Chrome, IE
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="" selected>---Select---</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>