javascript - 使用 jQuery 提交值

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/

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