通过选择打开 URL - jQuery答案

【问题标题】：Onchange open URL via select - jQuery通过选择打开 URL - jQuery
【发布时间】：2011-07-06 05:47:39
【问题描述】：

附加事件的最佳方法是更改选择选项的 URL。将 href 存储在 attr 中并在更改时获取它？

【问题讨论】：

What is the best way to make jump menu (HTML select dropdown)?的可能重复

【解决方案1】：

这很简单，让我们看一个工作示例：

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

.

备注：

问题已经指定了 jQuery。所以，我不考虑其他选择。
在旧版本的 jQuery (on 替换为 bind。
这是从 Meligy’s Web Developers Newsletter 中的 JavaScript 提示中提取的。

.

【讨论】：

现代 jQuery 1.7+ 版本将使用 on() 而不是 bind()。 $('#dynamic_select').on('change', function () {
很久以前我已经有一个关于这个的注释（参见答案的修订版），但由于bind 没有贬值，所以将其删除。但是，由于我在删除它几乎一天后收到了这条评论，所以我现在把它放回去了。
谢谢，完美。有没有办法让选择框在更改事件触发后显示选定的选项？
我想如果你不return false 它会保留选择的选项。
这行得通。只是想补充一点，我首先在 URL 末尾不带斜杠 / 的情况下尝试了它，但它不起作用。它显然需要那个正斜杠。

【解决方案2】：

我认为这是最简单的方法：

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

【讨论】：

嗨@Mark，如何使选项被选中，当它被重定向时，
@jafar-pinjar 我不确定你在问什么。最好创建一个新问题。
@MarkEirich，这是我的问题stackoverflow.com/questions/54037550/…

【解决方案3】：

您可以使用这个简单的代码 sn-p 使用 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 !== ''。

【解决方案4】：

抱歉，这里有很多编码...

我会免费给你一个最简单的。我早在 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（到服务器上的页面位置），它将始终有效。

【讨论】：

1.对此没有任何“发明”。 2. 如果你要钱，我会很震惊。 3. 我怀疑其他人声称“想出了它”。
"javascript 源现在说是他们的员工想出了它"我现在有点困惑
向您的信心致敬。 “我会免费给你最简单的”，哇！...
"没有 javascript" - 你认为 document.location.href=this.value 是什么？

【解决方案5】：

我会这样做

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

【讨论】：

你可以用 jQuery onchange="window.location = this.value;"

【解决方案6】：

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>

这适用于选定选项中的 href

【讨论】：

【解决方案7】：

另一种方式：

    <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】：

我相信在选择选项卡中重新定义位置的最简单方法如下：

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

【讨论】：

【解决方案9】：

超级简单的方法如下。无需创建函数。

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

【讨论】：

【解决方案10】：

如果你不希望 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'));
    })

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

试试这个完美的代码

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

【讨论】：

一旦用户点击“开始”输入按钮，这是否可以工作？

【解决方案13】：

**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>

【讨论】：

【解决方案14】：

在 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>

【讨论】：