Question

我一直在用这个拔掉我的头发，虽然我确信这个解决方案简直令人尴尬！我开发了一个下拉菜单，需要根据初始选择提出更多选择之前进行选择。它工作正常。

但是，我需要让jQuery提交所选选项的值而不提交提交按钮。因此，基本上，当用户选择水果大小时，用户被带到选项值中的相关页面。我弄清楚了！继承我的代码：

jQuery的：

<script type="text/javascript">
$(document).ready(function()
{
    $('#fruit').change(function()
    {
        var val = $('#fruit').val();
        $('.fruitSubSelect').hide();
        if(val)
        {
        $('#fruit'+val).show();
        $('#noFruit').hide();
        }
    });
});
</script>

CSS隐藏尺寸选择：

<style type="text/css">
.fruitSubSelect {display: none;}
</style>

HTML：

<form action="nothing">
<select id="fruit">
<option value="">Choose Fruit</option>
<option>Apple</option>
<option>Orange</option>
</select>
<select id="fruitApple" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-apple.html">Big Apple</option>
<option value="http://www.mysite.com/small-apple.html">Small Apple</option>
</select>
<select id="fruitOrange" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-orange.html">Big Orange</option>
<option value="http://www.mysite.com/small-orange.html">Small Orange</option>
</select>
<select id="noFruit">
<option value="">Choose A Fruit First</option>
<option value="">Please Select Fruit First</option>
</select>
</form>

非常感谢任何帮助！感谢。

Answer 1

我认为你正在寻找这样的东西：

$(".fruitSubSelect").change(function(){
   window.location.href = this.value;
});

示例：http://jsfiddle.net/jonathon/bWUnR/

这将获得下拉列表的选定值并将窗口位置设置为它（因此页面将转到它）。

Answer 2

将此添加到您的jquery alert中的是所选选项的URL：

$('.fruitSubSelect').change(function(){
    alert($(':selected',$(this)).val());
});

直播示例：http://jsfiddle.net/274Gv/

Answer 3

使用下拉列表时，请勿使用.val（）。：选择是你正在寻找的。 http://api.jquery.com/selected-selector/

使用jQuery提交值

3 个答案: