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

本文介绍如何利用jQuery结合Ajax实现动态加载两个级联下拉列表的功能。当第一个下拉列表选项发生变化时,第二个下拉列表会根据选择的内容进行更新。通过getJSON方法从服务器获取数据,并将这些数据填充到下拉列表中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

ExpandedBlockStart.gif代码
 <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();

 

 

转载于:https://www.cnblogs.com/Mac_Hui/archive/2010/07/27/1785950.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值