How to enable and disable dropdown list items based on another dropdown list

Question

I have two drop down list shown below second drop down list contains 8 items and first drop down list contains 3 elements based on first dropdown list i have to display particular items in second dropdown list ex: first dropdown list i will select " pass " then automatically second dropdown list shows only 3 items(out of 8) and if i select "Fail" or " Retake " then it should show remaining 5 items.

html code :

<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 code :

  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

Please attach a fillde. For now I can suggest doing something as follows:

Two drop downs:

<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>

and here is how you make items visible/hidden. You can either assign a class to items or find a set of items to hide by their value

$('#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;
    }
});

Edit:

Fiddle: http://jsfiddle.net/8ZVSu/