通过select -jQuery onchange打开URL

Question

附加事件以便更改选择选项URL的最佳方法是什么.将href存储在attr中并在更改时抓住它？

Answer 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(<1.7)中,您可能希望替换on为bind.
• 这是从Meligy的Web Developers Newsletter中的 JavaScript技巧中提取的.

.

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

Answer 3

对不起,但这里有很多编码......

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

Answer 4

您可以使用这个简单的代码片段使用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>

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

Answer 6

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

Answer 7

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

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

Answer 8

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

\n\n

<select onchange="window.location = this.options[this.selectedIndex].value">\n    <option value="">Switch Language</option>\n    <option value="{{ url(\'/en\') }}">English</option>\n    <option value="{{ url(\'/ps\') }}">\xd9\xbe\xda\x9a\xd8\xaa\xd9\x88</option>\n    <option value="{{ url(\'/fa\') }}">\xd8\xaf\xd8\xb1\xdb\x8c</option>\n</select>\n

\n