Html 重定向选择框中的选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7562095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redirect on select option in select box
提问by Lucas
At the moment I am using this:
目前我正在使用这个：
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
it redirect me on the location inside of the option value. But it doesn't work as expected .. mean that if I click on the first option of the select, then onChange action not running. I was thinking about javascript, but I think you'll have some better suggestions guys. So how can I make it work if I click on each option it'll redirect me to the it's value?
它将我重定向到选项值内部的位置。但它没有按预期工作.. 意味着如果我单击选择的第一个选项，则 onChange 操作不会运行。我在考虑 javascript，但我认为你们会有一些更好的建议。那么，如果我点击每个选项，它会将我重定向到它的价值，我该如何使它工作？
回答by margusholland
Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.
因为已经选择了第一个选项，所以永远不会触发更改事件。添加一个空值作为第一个值并检查位置分配中的空值。
Here's an example:
下面是一个例子：
<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>回答by David says reinstate Monica
I'd strongly suggest moving away from inline JavaScript, to something like the following:
我强烈建议从内联 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 演示（404 linkrot 受害者）。
通过 Wayback Machine 进行 JS Fiddle 演示。
为当前用户分叉 JS Fiddle。
In the mark-up in the JS Fiddle the first option has no value assigned, so clicking it shouldn't trigger the function to do anything, and since it's the default value clicking the selectand then selecting that first default optionwon't trigger the changeevent anyway.
在 JS Fiddle 的标记中，第一个选项没有赋值，所以点击它不应该触发函数做任何事情，因为它是默认值，点击select然后选择第一个默认值option不会触发change事件反正。
Update:
The latest example's (2017-08-09) redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains, as well as both domains requiring 'sameorigin' for framed content. - Albert
更新：
最新示例的 (2017-08-09) 重定向 URL 需要换出，因为 JS Fiddle 和两个域之间的混合内容错误，以及两个域都需要“sameorigin”来获取框架内容。- 阿尔伯特
回答by Somwang Souksavatd
to make it as globally reuse function using jquery
使用 jquery 使其成为全局重用函数
HTML
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>
Javascript using jquery
使用 jquery 的 JavaScript
$('.select_location').on('change', function(){
window.location = $(this).val();
});
now you will able to reuse this function by adding .select_location class to any Select element class
现在您可以通过将 .select_location 类添加到任何 Select 元素类来重用此功能
回答by Codemaker
This can be archived by adding code on the onchange event of the select control.
这可以通过在选择控件的 onchange 事件上添加代码来存档。
For Example:
例如：
<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>
回答by Saifur Rahman
{{-- 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>
回答by Yuriy Kots
For someone who doesn't want to use inline JS.
对于不想使用内联 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>
