Onchange open URL via select-jQuery

什么是附加事件的最佳方式，以便更改选择选项 URL。把这些东西放在一个仓库里，然后找零的时候拿走？

362172 次浏览
小开

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>
小开

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>
小开

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>
小开
最佳答案

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 with bind.
  • This is extracted from JavaScript tips in Meligy’s Web Developers Newsletter.

.

小开

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'));
})
小开

JS Fiddle Example

$('#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

小开

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.

小开 
<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);
}
小开

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>
小开

Try this code its working perfect

<script>
$(function() {


$("#submit").hide();


$("#page-changer select").change(function() {
window.location = $("#page-changer select option:selected").val();
})


});
</script>


<?php
if (isset($_POST['nav'])) {
header("Location: $_POST[nav]");
}
?>
<form id="page-changer" action="" method="post">
<select name="nav">
<option value="">Go to page...</option>
<option value="http://css-tricks.com/">CSS-Tricks</option>
<option value="http://digwp.com/">Digging Into WordPress</option>
<option value="http://quotesondesign.com/">Quotes on Design</option>
</select>
<input type="submit" value="Go" id="submit" />
</form>
小开 
**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>
小开

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>

小开

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>
小开

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>

提交答案