Question

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="">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>

Would appreciate any help! Thanks.

Answer 1

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).