Submitting a value with jQuery

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

Answer 2

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/

Answer 3

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