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?
附加事件以便更改选择选项URL的最佳方法是什么。将href存储在attr并在更改时抓住它?
12 个解决方案
#1
169
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.
- 这个问题已经指定了jQuery。所以,我保留其他替代方案。
- In older versions of jQuery (< 1.7), you may want to replace
on
withbind
. - 在旧版本的jQuery(<1.7)中,您可能希望替换为bind。
- This is extracted from JavaScript tips in Meligy’s Web Developers Newsletter.
- 这是从Meligy的Web Developers Newsletter中的JavaScript技巧中提取的。
.
。
#2
134
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>
#3
11
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!
我会免费给你最简单的一个。我在2005年发明了它,虽然javascript源现在说它是他们的工作人员提出它 - 超过一年后!
Anyway, here it is, no javascript !!!
无论如何,这里是,没有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.
只需键入您喜欢的任何URL或相对URL(到服务器上的页面位置),它将始终有效。
#4
9
You can use this simple code snippet using jQuery to redirect from a drop down menu.
您可以使用这个简单的代码片段使用jQuery从下拉菜单重定向。
<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.*.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>
#5
5
JS小提琴示例
$('#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
这适用于所选选项中的href
#6
4
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.*.com">Better Site</option>
</select>
#7
4
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>
#8
3
<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);
}
#9
2
If you don't want the url to put it on option's value, i'll give u example :
如果你不想让url把它放在选项的值上,我会给你举个例子:
<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'));
})
#10
2
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>
#11
1
**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://*.com/">
*
</option>
</select>
<script type="text/javascript">
$(function () {
$('#selectnav1').change( function() {
location.href = $(this).val();
});
});
</script>
#12
1
Try this code its working Firefox, Chrome, IE
试试这个代码吧它的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>
#1
169
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.
- 这个问题已经指定了jQuery。所以,我保留其他替代方案。
- In older versions of jQuery (< 1.7), you may want to replace
on
withbind
. - 在旧版本的jQuery(<1.7)中,您可能希望替换为bind。
- This is extracted from JavaScript tips in Meligy’s Web Developers Newsletter.
- 这是从Meligy的Web Developers Newsletter中的JavaScript技巧中提取的。
.
。
#2
134
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>
#3
11
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!
我会免费给你最简单的一个。我在2005年发明了它,虽然javascript源现在说它是他们的工作人员提出它 - 超过一年后!
Anyway, here it is, no javascript !!!
无论如何,这里是,没有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.
只需键入您喜欢的任何URL或相对URL(到服务器上的页面位置),它将始终有效。
#4
9
You can use this simple code snippet using jQuery to redirect from a drop down menu.
您可以使用这个简单的代码片段使用jQuery从下拉菜单重定向。
<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.*.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>
#5
5
JS小提琴示例
$('#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
这适用于所选选项中的href
#6
4
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.*.com">Better Site</option>
</select>
#7
4
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>
#8
3
<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);
}
#9
2
If you don't want the url to put it on option's value, i'll give u example :
如果你不想让url把它放在选项的值上,我会给你举个例子:
<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'));
})
#10
2
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>
#11
1
**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://*.com/">
*
</option>
</select>
<script type="text/javascript">
$(function () {
$('#selectnav1').change( function() {
location.href = $(this).val();
});
});
</script>
#12
1
Try this code its working Firefox, Chrome, IE
试试这个代码吧它的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>