Onchange通过select – jQuery打开URL
附加事件的最佳方式是如何改变select选项的URL。 将href存储在attr中并在变更时抓取它？
这很简单，让我们看一个工作的例子：
<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>
我认为这是最简单的方法：
<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>
你可以使用这个简单的代码片断使用jQuery从下拉菜单redirect。
<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>
对不起，但这里有很多编码…
我会免费给你最简单的一个给你。 我在2005年发明了它，尽pipejavascript源代码现在说它是他们的工作人员提出来的 – 超过一年以后！
无论如何，在这里，没有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>
只要input你喜欢的URL或相对的URL（到服务器上的页面位置），它将一直工作。
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>
这适用于选中的选项中的href
其他方式：
<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>
这是我该怎么做的
<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 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); }
如果你不想让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')); })
试试这个代码工作完美
<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>
