Select selected combobox with jQuery
<p>I've these three selects:</p>

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

<p>The user should select only one of this 5 <code>options values</code> (gender, age, date, age, date)</p>

<p>I was using this:</p>

<pre><code>var Xcombo_values = $('#Xcombos .Xcombo').val() 
</code></pre>

<p>But this only gives me values of the first <code>select</code>.</p>

<p>How Can I grab the value of selected option ?</p>

<p>Cheers</p>

<p><strong>Update :</strong></p>

<p>radio:</p>

<pre><code>&lt;input type="radio" name="tipo" id="pie" value="pie" /&gt;&lt;label for="pie"&gt;
&lt;input type="radio" name="tipo" id="bar" value="bar" /&gt;&lt;label for="bar"&gt;
&lt;input type="radio" name="tipo" id="line" value="line" /&gt;&lt;label for="line"&gt;

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