0

A と B の 2 つの型を持つモデルを考えてみましょう。どちらの型も色を文字列として格納します。タイプ A は青または赤です。タイプ B は白または黒を選択できます。

タイプ A のフォームを表示すると、[青、赤] を含む HTML 選択リストがあります。タイプ B の場合、選択リストには [白、黒] が含まれます。

同じモデルに対してこれら 2 つの異なる選択を表示する最良の方法は何ですか?

新しいモデルを作成するときはタイプがないため、タイプの切り替えは機能しません。

タイプごとに 1 つずつ、合計 2 つの作成ボタンが必要ですか? それとも、共通の基本モデルから継承して、2 つの別個のモデルとして設計する必要がありますか?

タイプの選択に基づいて、選択の 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 に答える