JQuery 中dropdownlist实现数据捆绑并相互联动

 

代码

 <script type="text/javascript" src="JavaScript/jquery-1.3.2.js"></script>
    <script language="javascript" type="text/javascript">
      $(document).ready(function(){
        BindDropDownList(); 
        
        $("#DropDownList1").change(function(){BindDropDownList2();});    
        });
        function  BindDropDownList()
        {
           $("#DropDownList1").empty();               
            $.getJSON("EmployeeLoad.ashx",null,function(json){
            $.each(json,function(i){$("#DropDownList1").append($("<option></option>").val(json[i].ID).html(json[i].Name))});
            });
            $("<option></option>").val("").html("").appendTo("#DropDownList1");
            
        }
        function BindDropDownList2()
        {
        
          if($("#DropDownList1 option:selected").val()=="")
          {         
             $("#Label1").empty(); 
             $("#DropDownList2").empty(); 
          }
          else
          {
             $("#DropDownList2").empty();                   
             $.getJSON("Handler.ashx?ID=" +$("#DropDownList1 option:selected").text(),null,function(json){
               $.each(json,function(i){$("#DropDownList2").append($("<option></option>").val(json[i].Text).html(json[i].Text))});
              
             });
              $("<option></option>").val("").html("").appendTo("#DropDownList2");
              $("#Label1").html($("#DropDownList1 option:selected").text());           
          }        
        }

    </script>

 

 

Dropdownlist 清空： $("#DropDownList2").empty();