используя jquery, что является лучшим способом переключения набора переключателей

Question

У меня есть веб-страница aspnet-mvc с выпадающим списком.В раскрывающемся списке можно выбрать:

• Большой
• Маленький

рядом с раскрывающимся списком. У меня есть серия переключателей

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

Я хочу иметь его, когда я изменяю выбор выпадающего меню на Малый, список переключателей меняется на

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

, и если вы возвращаете выпадающий список обратно на Большой, он переключает переключатели обратнок исходному набору выше.

каков наилучший способ сделать это?Если у меня есть оба набора переключателей на странице и скрыть те, которые не связаны с выбранным элементом в раскрывающемся списке.Есть ли более элегантный способ сделать это?

Answer 1

Посмотрите на эту рабочую демонстрацию. Я думаю, это то, что вы ищете.

Демо

Разметка

<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();
    });
});

Answer 2

Ваш подход наличия обоих наборов на странице и скрытия тех, которые не связаны с выбранным элементом в раскрывающемся списке, звучит примерно так, хотя я лично перевернул бы все, оставил бы все восемь переключателей видимыми и избавился бы от раскрывающийся список (размер будет определен из выбранного радио).

Примерно так:

Big:    ( ) 12  ( ) 24  ( ) 36  ( ) 48
Small:  ( ) 24  ( ) 48  (o) 72  ( ) 96

Если вы дадите им значения, такие как B-24, S-24, S-96 и т. Д., Разделение частей в вашем методе действия тривиально, вам не нужно возиться с javascript и, что более важно, вашим конечные пользователи по достоинству оценят возможность выбора одним щелчком вместо трех (один для открытия раскрывающегося списка, другой для выбора параметра и третий для выбора переключателя).