Question

I’ve these three selects:

<div id ="Xcombos" class = "styled-select">
  <select id="combopie" class="Xcombo" style="display:none;">
    <option value="gender">Gender</option>
    <option value="age">Age</option>
  </select>
  <select id="combobar" class="Xcombo" style="display:none;">
    <option value="date">Date</option>
    <option value="age">Age</option>
  </select>
  <select id="comboline" class="Xcombo" style="display:none;">
    <option value="date">Date</option>
  </select>
</div>

The user should select only one of this 5 options values (gender, age, date, age, date)

I was using this:

var Xcombo_values = $('#Xcombos .Xcombo').val() 

But this only gives me values of the first select.

How Can I grab the value of selected option ?

Cheers

Update :

radio:

<input type="radio" name="tipo" id="pie" value="pie" /><label for="pie">
<input type="radio" name="tipo" id="bar" value="bar" /><label for="bar">
<input type="radio" name="tipo" id="line" value="line" /><label for="line">

$(function () {
    $('input[type=\'radio\']').click(function () {
        $('select.Xcombo').hide();
        $('#combo' + $(this).attr('id')).show();
    });
});

Answer 1

As easy as:

var selected = $('#combopie option:selected').val();

You can play with it in this fiddle:

http://jsfiddle.net/EnWvN/

EDIT

And if you want to retrieve the selected option of each select:

var select_values = [],
    sel_val;

$('.Xcombo').each(function () {
    sel_val = $(this).children(':selected').val();
    select_values.push(sel_val);
});

http://jsfiddle.net/EnWvN/4/

(In the example I bound the code to the change event. The relevant to you is what is fired, not how)

And to get the value of a radio, is pretty much of the same. Just use the following to get each single value:

$("#the_id_of_your_form input[name='the_name_of_your_radio']:checked").val();