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

如果您将下拉菜单更改回Big，则会将单选按钮更改回上面的原始设置。

这样做的最佳方式是什么？我应该在页面上有两组单选按钮，并隐藏与下拉列表中所选项目无关的那些按钮。有更优雅的方式吗？

Answer 1

看看这个工作演示。我认为这就是你要找的东西。

<强> Demo

标记

<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，而且 - 更重要的是 - 你的最终用户将欣赏能够通过一次点击而不是三次选择他们的选择（一个打开下拉列表，另一个选择选项，第三个选择单选按钮）。

使用jquery，切换一组单选按钮的最佳方法是什么

2 个答案: