Onchange 通过选择打开 URL - jQuery

Onchange open URL via select - jQuery

提问by Coughlin

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 中并在更改时获取它？

回答by Meligy

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

• 该问题已指定 jQuery。所以，我不考虑其他选择。
• 在旧版本的 jQuery (< 1.7) 中，您可能需要替换on为bind.
• 这摘自 Meligy 的 Web 开发人员时事通讯中的JavaScript 技巧。

.

.

回答by Mark Eirich

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>

回答by Lars Tuff

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（到服务器上的页面位置），它始终有效。

回答by McHerbie

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

回答by MattoTodd

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>

回答by robertparkerx

JS Fiddle Example

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

回答by joan16v

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>

回答by Syed Muhammad Wasiq Saleem

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>

回答by Y?ld?ray üNLü

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

回答by Prakash

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