0

考虑一个具有 2 种类型的模型：A 和 B。这两种类型都将颜色存储为字符串。A 型可以是蓝色或红色。B 型可以是白色或黑色。

显示类型 A 的表单时，有一个包含 [blue, red] 的 HTML 选择列表。对于类型 B，选择列表包含 [white, black]。

为同一模型显示这两个不同选择的最佳方法是什么？

打开类型不起作用，因为当您创建新模型时，没有类型。

您是否需要有两个创建按钮，每个类型一个？还是应该将其设计为两个独立的模型，继承自一个通用的基本模型？

我考虑了基于类型选择的选择的 AJAX (jQuery) 更新。这似乎是一个简单问题的非常复杂的解决方案。

4

2 回答 2

1

我建议optgroup。

<select>
  <optgroup label="type A">
    <option value="blue">Blue</option>
    <option value="red">Red</option>
  </optgroup>
  <optgroup label="type B">
    <option value="black">Black</option>
    <option value="white">White</option>
  </optgroup>
</select>
于 2012-04-03T23:43:00.743 回答
1

绝对应该在模型的验证中执行颜色类型限制。为了使视图与您的模型保持一致，我建议使用一些 javascript：

<select class="type-select">
  <option value="TypeA">Type A</option>
  <option value="TypeB">Type B</option>
</select>

<select class="type-A-opts">
  <option value="blue">Blue</option>
  <option value="red">Red</option>
</select>
<select class="type-B-opts" style="display:none" >
  <option value="black">Black</option>
  <option value="white">White</option>
</select>

<script>
  $(".type-select").change(function(){
    var cur_value = $(this).attr("value");
    if(cur_value == "TypeA"){
      $(".type-A-opts").show();
      $(".type-B-opts").hide();
    }else{
      $(".type-A-opts").hide();
      $(".type-B-opts").show();
    }
  });
</script>
于 2012-04-04T01:36:33.257 回答