Html 在选择框中选择选项时重定向

目前我正在使用这个：

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

---

它将我重定向到选项值内部的位置。但它并没有像预期的那样起作用。。这意味着，如果我单击select的第一个选项，那么onChange操作将不会运行。我在考虑javascript，但我想你们会有一些更好的建议。那么，如果我单击每个选项，它会将我重定向到它的值，我如何使它工作呢？

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

下面是一个例子：

选择 谷歌 雅虎

---

我强烈建议从内联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中的标记中，第一个选项没有指定值，因此单击它不应该触发函数执行任何操作，而且由于它是默认值，因此单击select然后选择第一个默认选项无论如何也不会触发更改事件

更新：

---

最新示例的2017-08-09重定向URL需要调出，因为JS Fiddle和这两个域之间存在混合内容的错误，以及这两个域对框架内容都要求“sameorigin”。-Albert使用jquery将其作为全局重用函数

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

HTML

---

现在，您可以通过将.select_location类添加到任何select元素类中来重用此函数

，这可以通过在select控件的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>

---

对于不想使用内联JS的人

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

---

这已经是JavaScript了。内联JavaScriptI执行了此操作，但如果用户按下浏览器上的“后退”按钮，则可以选择“空”值，脚本位置将被中断。@Lucas然后将禁用的属性添加到“选择”中。。。所以当你点击它时什么也不会发生：选择…@All-不需要。上面的脚本不会中断！！这对我有效，但我必须添加当前URL，这是因为我将所选值作为GET参数传递：onchange=This.options[This.selectedIndex].value&&window.location='{{URL:：current}}？category_id='+This.options[This.selectedIndex].value；三年太晚了，但这是最好的答案。你的小提琴链接给出了一个404，否则答案很好；HTML缺失，但内联javascript和标准javascript在google爬行方面会有什么不同吗？

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

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