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

Posted 2023-02-16

【中文标题】重定向选择框中的选择选项

【英文标题】：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）

【参考方案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>