Question

我有下面显示的两个下拉列表第二个下拉列表包含8个项目，第一个下拉列表包含基于第一个下拉列表的3个元素我必须在第二个下拉列表中显示特定项目例如：第一个下拉列表我将选择＆＃34; pass＆＃34;然后自动第二个下拉列表只显示3个项目（8个中），如果我选择＆＃34;失败＆＃34;或＆＃34; Retake＆＃34;然后它应显示剩余的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/

如何根据另一个下拉列表启用和禁用下拉列表项

1 个答案:

编辑：