Question

i have a aspnet-mvc web page with a dropdown. The choices in the dropdown are:

• Big
• Small

next to the dropdown i have a series of radio buttons

      @Html.RadioButton("quantity","12",true)12  
      @Html.RadioButton("quantity","24",false)24 
      @Html.RadioButton("quantity","36",false)36 
      @Html.RadioButton("quantity","48",false)48 

i want to have it when i change the dropdown selection to Small, the list of radio buttons changes to

      @Html.RadioButton("quantity","24",true)24
      @Html.RadioButton("quantity","48",false)48
      @Html.RadioButton("quantity","72",false)72
      @Html.RadioButton("quantity","96",false)96

and if you change the dropdown back to Big, it would change the radio buttons back to the original set above.

what is the best way of doing this? should i have both sets of radio buttons on the page and hide the ones that are not associated with the selected item in the dropdown. Is there a more elegant way of doing this?

Answer 1

Take a look at this working demo. I think this is what you are looking for.

Demo

Mark up

<select>
    <option value="big">Big</option>
    <option value="small">Small</option>
</select>

<span id="big">
<input type="radio" value="24" checked/>12
<input type="radio" value="24" />24
<input type="radio" value="24" />36
<input type="radio" value="24" />48
</span>
<span id="small" style="display:none;">
<input type="radio" value="24" checked/>24
<input type="radio" value="24" />48
<input type="radio" value="24" />72
<input type="radio" value="24" />96
</span>

Js

$(function(){
    $("select").change(function(){
        $("#big, #small").hide();
        $("#"+this.value).show();
    });
});