开发者

Submitting a value with jQuery

I've been pulling my hair out with this one, although I'm certain the solution is embarrassingly simple! I have developed a pull-down menu that requires a selection before presenting more choices, based on the initial selection. It works fine.

However, I need to have jQuery submit the value of the option chosen without a submit button present. So, basically, when a user selects a fruit size, the user is taken to the relevant page in the option value. I cant figure it out! Heres my code:

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 to hide size select:

<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="">Choos开发者_JAVA百科e 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>

Would appreciate any help! Thanks.


I think you're looking for something like this:

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

Example: http://jsfiddle.net/jonathon/bWUnR/

This will get the selected value of the dropdown and set the window location to it (so the page will go to it).


the addition of this into your jquery alert's the selected option's URL:

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

live example: http://jsfiddle.net/274Gv/


With dropdowns, do not use .val(). :selected is what you're looking for. http://api.jquery.com/selected-selector/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜