Enabling combobox based on radio button selection

Question

I have this radio buttons:

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

And I want a combobox based on seletected radio button.

<select id="Xcombo1" class="Xcombo">
<option value = "" >This options should be based on seletec radio</option>
</select>

Some code that ive already have:

$('input:radio[name=type]:checked').val(); // to get selected radio.

My question is, how can I have those options based on selected radio button ?

note: Anytime I selected a diferent radio button those options should dynamically change
Cheers.

Answer 1

Heres an example for you to test, hopefully I understood what you wanted

HTML:

<label for="pie">PIE</label><input type="radio" name="type" id="pie" value="pie" />
<br />
<label for="bar">BAR</label><input type="radio" name="type" id="bar" value="bar" />
<br />
<label for="line">LINE</label><input type="radio" name="type" id="line" value="line" />
<br />
<br />

<select id="combopie" class="Xcombo" style="display:none;">
    <option value="pie">Pie Options Here</option>
</select>

<select id="combobar" class="Xcombo" style="display:none;">
    <option value="bar">Bar Options Here</option>
</select>

<select id="comboline" class="Xcombo" style="display:none;">
    <option value="line">Line Options Here</option>
</select>

​jQuery:

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

Working example