附加事件的最佳方法是什么,以便更改选择选项的URL。将href储存在attr中,以备不时之需?
Answers:
这很简单,让我们看一个工作示例:
<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>
。
on
为bind
。。
$('#dynamic_select').on('change', function () {
bind
未进行折旧,因此将其删除。但是,由于我在删除评论后将近一天收到此评论,所以现在将其放回原处。
return false
,它将保留所选的选项。
我认为这是最简单的方法:
<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>
抱歉,这里有很多代码在进行...
我将免费给您最简单的一个。我在2005年发明了它,尽管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>
只需输入您喜欢的任何URL或相对URL(指向服务器上页面的位置),它将始终有效。
document.location.href=this.value
是什么?
您可以使用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.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>
$(this).val()
使用this.value
,并url != ''
用url !== ''
。
这是我会做的
<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>
我相信在select选项卡中重新定义位置的最简单方法如下:
<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>
超级简单的方法如下。无需创建函数。
<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>
<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);
}
试试这个代码,它的工作完美
<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>
尝试使用此代码可正常运行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>