如何基於另一個下拉列表啟用和禁用下拉列表項

Question

我有兩個下拉列表，如下所示，第二個下拉列表包含8個項目，第一個下拉列表包含基於第一個下拉列表的3個元素，我必須在第二個下拉列表中顯示特定的項目，例如：第一個下拉列表我將選擇“ pass ”，然后自動第二個下拉列表僅顯示3個項目（共8個項目），如果我選擇“失敗”或“ Retake ”，則應該顯示其余5個項目。

html代碼 ：

<td valign="middle" style="font-size: 0.9em" id="attemptstatus">@Html.DropDownListFor(model => model.CTData[i][0].AttemptStatus, new SelectList(
                  new List<Object>{ 
                                   new { value = 0 , text = "Select"  },
                                   new { value = 1 , text = "Pass"  },
                                   new { value = 2 , text = "Fail" },
                                   new { value = 3 , text = "Retake"}
                                  },
                    "value",
                    "text",
                   statusvalue), new { @class = "attemptstatus", @id = "attempttestid" + i }) </td>

 <td id="ctpassoption" style="width: 400px">@Html.DropDownListFor(model => model.CTData[i][0].RemarkId1, new SelectList(Model.PassOptions, "Value", "Text", Model.CTData[i][0].RemarkId1), new { @class = "ct_option", @id = "passid" + i })</td>

JavaScript代碼 ：

  if (($('#attempttestid0').val() === '2') || ($('#attempttestid0').val() === '3'))
           {
              var a="@ViewBag.TempPass"
              var arr=a.split(",");
              for(var i=0;i<arr.length;i++)
              {
                  $("#passid0 option[value=" + arr[i] + "]").disable(); 
              }
           }
          else {
              var a1="@ViewBag.TempOther"
              var arr1=a1.split(",");
              for(var i=0;i<arr1.length;i++)
              {
                  $("#passid0 option[value=" + arr1[i] + "]").disable(); 
              }
          }

          $('#attempttestid0').on('change', function () {
              if ((this.value === '2')||(this.value === '3')) {
                 var a2="@ViewBag.TempPass"
                 var arr2=a2.split(",");
                  for(var i=0;i<arr2.length;i++)
                  {
                      $("#passid0 option[value=" + arr2[i] + "]").disable(); 
                  }
              }
              else
               {
                 var a3="@ViewBag.TempOther"
                 var arr3=a3.split(",");
                  for(var i=0;i<arr3.length;i++)
                  {
                      $("#passid0 option[value=" + arr3[i] + "]").disable(); 
                  }
              }
          });

Answer 1

請附上填充文字。 就目前而言，我建議采取以下措施：

兩個下拉列表：

<select id="first">
    <option value="none">please make a selection</option>
    <option value="1st">first set</option>
    <option value="2nd">second set</option>
</select>

<select id="second">
    <option class="1st"value="val1">value 1</option>   
    <option class="1st" value="val2">value 2</option>   
    <option class="1st" value="val3">value 3</option>   
    <option class="1st" value="val4">value 4</option>   
    <option class="1st" value="val5">value 5</option>   
    <option class="2nd" value="val6">value 6</option>   
    <option class="2nd" value="val7">value 7</option>   
</select>

這就是您使項目可見/隱藏的方式。 您可以為項目分配一個類別，也可以找到一組要按其值隱藏的項目

$('#first').change(function(){

    switch ($(this).val())
    {
        case '1st':
            $('.1st').show();
            $('.2nd').hide();
            break;

        case '2nd':
            $('.1st').hide();
            $('.2nd').show();
            break;

        case 'none':
            $('.1st').show();
            $('.2nd').show();
            break;
    }
});

編輯：

小提琴： http : //jsfiddle.net/8ZVSu/