在另一個下拉菜單的Indexchanged上顯示下拉菜單.net 2.0

Question

我有這樣的下拉菜單。我想要顯示另一個下拉列表取決於這個下拉列表中選定的索引更改。如何使用JavaScript的onchange函數執行此操作？ 由於我在一箇舊的項目工作，所以它在.NET 2.0，這就是爲什麼我不能用asp：下拉

<select name="myselect" id="myselect" onchange="this.form.submit()"> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
     <option value="4">Four</option> 
    </select> 

Answer 1

我最近做了級聯多選擇dropwon，請找到下面的代碼希望它會幫助你。

 <table> 
      <tr> 
       <td style="text-align: right;"> 
        <asp:Label ID="lblCountry" runat="server" Font-Size="12px" Text="Country:" Style="margin-top: 19px !important"></asp:Label> 
       </td> 
       <td style="text-align: left;"> 
        <select id="ddlCountry" multiple="multiple"> 
        </select> 
        <asp:HiddenField ID="ddlCountryHid" runat="server" /> 
       </td> 
      </tr> 
      <tr> 
       <td style="text-align: right"> 
        <asp:Label ID="lblState" runat="server" Font-Size="12px" Text="State:" Style="margin-top: 19px !important"></asp:Label> 
       </td> 
       <td style="text-align: left;"> 
        <asp:HiddenField ID="ddlStateHid" runat="server" /> 
        <select id="ddlState" multiple="multiple" style="margin-left: 5px;"> 
        </select> 

       </td> 
      </tr> 
     </table> 

的Javascript

<script type="text/javascript"> 

    $(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "Index.aspx/GetCountry", 
      data: '', 
      contentType: "application/json;charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       for (var i = 0; i < data.d.length; i++) { 
        $("#ddlCountry").append($("<option></option>").val(data.d[i].Id).html(data.d[i].Name)); 
       } 

       //for multiselect 
       $('#ddlCountry').multiselect({ 
        includeSelectAllOption: true 
       }); 
       $.ajax({ 
        type: "POST", 
        url: "Index.aspx/GetSelctedCountry", 
        data: '', 
        contentType: "application/json;charset=utf-8", 
        dataType: "json", 
        success: function (data) { 
         var valArr = data.d.split(','); 
         i = 0, size = valArr.length; 
         // //for multiselect show the selcted country as selected if 
         for (var i = 0; i < data.d.length; i++) { 
          $("#ddlCountry").find(":checkbox[value='" + valArr[i] + "']").attr("checked", "checked"); 
          $("#ddlCountry option[value='" + valArr[i] + "']").attr("selected", 1).change(); 
          $("#ddlCountry").multiselect("refresh"); 
         } 
        }, 
        error: function (err) { 

        } 
       }); 
      }, 
      error: function (err) { 

      } 
     }); 
     var obj = {}; 
     obj.state = ''; 
     $.ajax({ 
      type: "POST", 
      url: "Index.aspx/GetState", 
      data: JSON.stringify(obj), 
      contentType: "application/json;charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       for (var i = 0; i < data.d.length; i++) { 
        $("#ddlState").append($("<option></option>").val(data.d[i].Id).html(data.d[i].Name)); 
       } 
       var obj = $("#MainContent_ChildContent2_ddlCountryHid").val(); 
       //for multiselect 
       $('#ddlState').multiselect({ 
        includeSelectAllOption: true, 
        height: 50, 
       }); 

       $('#ddlState').multiselect("disable"); 
      }, 
      error: function (err) { 

      } 
     }); 
     $('#ddlState').change(function() { 
      var d1 = ''; 
      $('#ddlState :checked').each(function (i) { 
       d1 = d1 + $(this).val() + ','; 
      }); 
      $("#MainContent_ChildContent2_ddlStateHid").val(d1); 
     }); 
     $('#ddlCountry').change(function() { 
      var d = ''; 
      $('#ddlCountry :checked').each(function (i) { 
       d = d + $(this).val() + ','; 
      }); 
      $("#MainContent_ChildContent2_ddlCountryHid").val(d); 
      var obj = {}; 
      obj.state = d; 
      $.ajax({ 
       type: "POST", 
       url: "Index.aspx/GetState", 
       data: JSON.stringify(obj), 
       contentType: "application/json;charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        var data1 = ''; 
        $('#ddlState option').each(function (index, option) { 
         if (data1 == '') 
          data1 = $(option); 
         $(option).remove(); 
        }); 
        //for multiselect 
        $('#ddlState').multiselect({ 
         includeSelectAllOption: true 
        }); 
        if (data.d.length == 0) { 
         $("#ddlState").append($("<option></option>").val('').html('')).multiselect("destroy").multiselect(); 
         $("#ddlState").attr('disable', 'disable'); 
        } 


        for (var i = 0; i < data.d.length; i++) { 
         $("#ddlState").append($("<option></option>").val(data.d[i].Id).html(data.d[i].Name)); 
        } 
        $.ajax({ 
         type: "POST", 
         url: "Index.aspx/GetSelectedState", 
         data: '', 
         contentType: "application/json;charset=utf-8", 
         dataType: "json", 
         success: function (data) { 
          var valArr = data.d.split(','); 
          i = 0, size = valArr.length; 
          //for multiselect show by default selected 
          for (i; i < size; i++) { 
           $("#ddlState").find(":checkbox[value='" + valArr[i] + "']").attr("checked", "checked"); 
           $("#ddlState option[value='" + valArr[i] + "']").attr("selected", 1); 
           $("#ddlState").multiselect("refresh"); 
          } 
         }, 
         error: function (err) { 

         } 
        }); 

        $('#ddlState').multiselect('rebuild'); 
        $('#ddlState').multiselect({ 
         includeSelectAllOption: true 
        }); 
        if (data.d.length == 0) 
         $('#ddlState').multiselect("disable"); 
        else 
         $('#ddlState').multiselect("enable"); 

       }, 
       error: function (err) { 
       } 
      }); 
     }); 
     $('#testid').click(function() { 
      $('#ddlState option').prop('selected', true); 
     }); 
    }); 


</script>