选项上的选项

Question

编辑:我在链接上忘了http://.这不是我的问题.我会解决这个问题......

我有一些选择,像这样:

<select class="mySelect">
    <option value="http://www.url1.com">Url 1</option> <!--Default displayed--->
    <option value="http://www.url2.com">Url 2</option>
    <option value="http://www.url3.com">Url 3</option>
</select>

对此我有一个jquery监听器,看起来像这样:

$('.mySelect').change(function(){
    window.location.replace($(this).val());
});

由于这只是对所做的更改做出响应,因此我无法重定向到"www.url1.com".我该怎么用？我只在谷歌上获得改变的建议.

编辑2:我有一堆关于使用虚拟作为第一选项的解决方案.我还得到了另一个使用按钮读取所选选项然后重定向的解决方案,但这在我正在进行的项目中无法使用,即使这些是非常好的解决方案.

在这种情况下,我希望它听取用法,即使对自己进行了更改,就像我选择了第一个选项(默认情况下选择)我想让它用它做一些事情 - 在上面的情况下重定向.如果有人能很好地解决这个问题,我会保持开放.

Answer 1

尝试输入空值的第一个选项:

<select class="mySelect">
    <option value="">Please select...</option>
    <option value="http://www.url1.com">Url 1</option>
    <option value="http://www.url2.com">Url 2</option>
    <option value="http://www.url3.com">Url 3</option>
</select>

然后,您可以修改jQuery以确保在重定向之前有值:

$('.mySelect').change(function(){
    var value = $(this).val();
    if (value != "") {
       window.location.replace(value);
    }
});

示例小提琴

另请注意,http://链接值上需要(或您使用的任何协议).

更新

如果您不想使用虚拟选项,则需要更改逻辑以在按钮单击时工作:

<select class="mySelect">
    <option value="http://www.url1.com">Url 1</option>
    <option value="http://www.url2.com">Url 2</option>
    <option value="http://www.url3.com">Url 3</option>
</select>
<button id="redirect">Go</button>

$("#redirect").click(function() {
    window.location.replace($(".mySelect").val());
});