重定向选择框中的选择选项答案

【问题标题】：Redirect on select option in select box重定向选择框中的选择选项
【发布时间】：2011-11-25 14:24:52
【问题描述】：

目前我正在使用这个：

<select ONCHANGE="location = this.options[this.selectedIndex].value;">

它将我重定向到选项值内部的位置。但是它没有按预期工作..意味着如果我单击选择的第一个选项，则 onChange 操作不会运行。我在考虑javascript，但我认为你们会有一些更好的建议。那么，如果我点击每个选项，它会将我重定向到它的值，我该如何让它工作呢？

【问题讨论】：

这已经是 JavaScript。（内联 JavaScript）

标签： html action onchange

【解决方案1】：

因为已经选择了第一个选项，所以永远不会触发更改事件。添加一个空值作为第一个值，并在位置分配中检查是否为空。

这是一个例子：

https://jsfiddle.net/bL5sq/

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
  <option value="">Select...</option>
  <option value="https://google.com">Google</option>
  <option value="https://yahoo.com">Yahoo</option>
</select>

【讨论】：

我做了，但是如果用户按下浏览器上的后退按钮，那么他可以选择“空”值，脚本位置将被破坏。
@Lucas 然后将disabled 属性添加到“选择...”值，这样当您单击它时不会发生任何事情：<option value="" disabled="disabled">Select...</option>
@All - 不需要。上面的脚本没有中断！！
这对我有用，但我必须添加当前 URL，这是因为我将所选值作为 GET 参数传递：onchange="this.options[this.selectedIndex].value && (window.location = '{{ URL::current() }}?category_id=' + this.options[this.selectedIndex].value);"

【解决方案2】：

我强烈建议不要使用内联 JavaScript，而是使用以下内容：

function redirect(goto){
    var conf = confirm("Are you sure you want to go elswhere?");
    if (conf && goto != '') {
        window.location = goto;
    }
}

var selectEl = document.getElementById('redirectSelect');

selectEl.onchange = function(){
    var goto = this.value;
    redirect(goto);

};

JS Fiddle demo (404 linkrot victim).
JS Fiddle demo via Wayback Machine.
Forked JS Fiddle for current users.

在 JS Fiddle 的标记中，第一个选项没有分配任何值，因此单击它不应触发函数执行任何操作，因为它是默认值，单击 select 然后选择第一个默认值option 无论如何都不会触发 change 事件。

更新：
最新示例 (2017-08-09) 的重定向 URL 需要换出，因为 JS Fiddle 和两个域之间的混合内容存在错误，以及两个域都需要框架内容的“同源”。 - 阿尔伯特

【讨论】：

晚了三年，但这是 IMO 的最佳答案。
你的小提琴链接给出了 404，否则很好的答案；但是缺少 HTML
就谷歌抓取而言，内联和标准 javascript 会有什么不同吗？

【解决方案3】：

使用 jquery 使其成为全局重用函数

HTML

<select class="select_location">
   <option value="http://localhost.com/app/page1.html">Page 1</option>
   <option value="http://localhost.com/app/page2.html">Page 2</option>
   <option value="http://localhost.com/app/page3.html">Page 3</option>
</select>

使用 jquery 的 JavaScript

$('.select_location').on('change', function(){
   window.location = $(this).val();
});

现在您可以通过将 .select_location 类添加到任何 Select 元素类来重用此功能

【讨论】：

【解决方案4】：

对于不想使用内联 JS 的人。

<select data-select-name>
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        document.querySelector('select[data-select-name]').onchange=changeEventHandler;
    },false);

    function changeEventHandler(event) {
        window.location.href = this.options[this.selectedIndex].value;
    }
</script>

【讨论】：

【解决方案5】：

这可以通过在选择控件的 onchange 事件上添加代码来存档。

例如：

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value=""></option>
    <option value="http://google.com">Google</option>
    <option value="http://gmail.com">Gmail</option>
    <option value="http://youtube.com">Youtube</option>
</select>

【讨论】：

【解决方案6】：

    {{-- dynamic select/dropdown --}}
    <select class="form-control m-bot15" name="district_id" 
        onchange ="location = this.options[this.selectedIndex].value;"
        >
          <option value="">--Select--</option>
          <option value="?">All</option>

            @foreach($location as $district)
                <option  value="?district_id={{ $district->district_id }}" >
                  {{ $district->district }}
                </option> 
            @endforeach   

    </select>

【讨论】：