Question

目前我正在使用它：

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

它将我重定向到选项值内的位置。但它没有按预期工作..意味着如果我点击select的第一个选项，那么onChange动作不会运行。我在想javascript，但我想你会有更好的建议。那么如果我点击每个选项它会将我重定向到它的值，我怎么能让它工作呢？

Answer 1

由于已选择第一个选项，因此永远不会触发更改事件。添加一个空值作为第一个，并在位置分配中检查为空。

以下是一个例子：

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

这是小提琴：http://jsfiddle.net/bL5sq/

Answer 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和两个域之间的混合内容错误以及两个域都需要'sameorigin'的域而需要交换。 - 艾伯特

Answer 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元素类

来重用此函数

Answer 4

这可以通过在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>

Answer 5

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

Answer 6

针对不想使用内联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>

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

6 个答案: