一种新的省市二级联动Javascript

省市数据表结构:
ID:Guid
CreationDate:DateTime
LastModified:DateTime
RecordState:Int
LabelID:Guid
LabelCode:Varchar
ParentID:Guid
Code:Varchar
ChineseText:Nvarchar
EnglishText:Varchar
SortKeyword:Varchar

ContractedBlock.gif ExpandedBlockStart.gif Code
// JScript 文件
 function initialize()
 {
   var xmlhttp;
    
if(window.ActiveXObject)
    {
       xmlhttp
=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
else if(window.XMLHttpRequest)
    {
       xmlhttp
=new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange
=function(){
        
if(xmlhttp.readystate==4)//判断是否是完成状态
        {
            
if(xmlhttp.status==200)//判断是否执行成功
            {
               document.getElementById(
"ProvinceTD").innerHTML=xmlhttp.responsetext;
            }
        }
    };
    xmlhttp.open(
"GET","GetData.aspx?type=Province",true);
    xmlhttp.send(
null);
 }

 function initializeType()
 {
   var xmlhttp;
    
if(window.ActiveXObject)
    {
       xmlhttp
=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
else if(window.XMLHttpRequest)
    {
       xmlhttp
=new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange
=function(){
        
if(xmlhttp.readystate==4)//判断是否是完成状态
        {
            
if(xmlhttp.status==200)//判断是否执行成功
            {
               document.getElementById(
"TypeTD").innerHTML=xmlhttp.responsetext;
               document.getElementById(
"TypeTD").innerHTML=xmlhttp.responsetext;
            }
        }
    };
    xmlhttp.open(
"GET","GetData.aspx?type=ProductType",true);
    xmlhttp.send(
null);
 } 

function changeProvince(proObj, cityObj)
{
    var xmlhttp;
    
if(window.ActiveXObject)
    {
       xmlhttp
=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
else if(window.XMLHttpRequest)
    {
       xmlhttp
=new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange
=function(){
        
if(xmlhttp.readystate==4)//判断是否是完成状态
        {
            
if(xmlhttp.status==200)//判断是否执行成功
            {
               document.getElementById(cityObj).innerHTML
=xmlhttp.responsetext;
            }
        }
    };
    xmlhttp.open(
"GET","GetData.aspx?type="+document.getElementById(proObj).value,true);
    xmlhttp.send(
null); 
}

 

 

GetData.aspx.cs

 

ContractedBlock.gif ExpandedBlockStart.gif Code
protected void Page_Load(object sender, EventArgs e)
    {
        
if (!IsPostBack) {
            
//是否接收参数
            if (!string.IsNullOrEmpty(Request["type"])) {
                
                
switch (Request["type"]) { 
                    
//获取省份
                    case "Province":
                        
if (Cache["Province"== null)
                        {
                            List
<XbDataLabelItem> ProvinceList = new List<XbDataLabelItem>();
                            List
<string> SearchProv = new List<string>();
                            SearchProv.Add(
"ParentID='c02c099d-2098-41a3-99f4-23711aff5b88'");
                            ProvinceList 
= XbDataLabelBPM.SelectDataLabelItemList(SearchProv.ToArray(), "ChineseText,ID""ChineseText"-10"ID");
                            StringBuilder SbProvince 
= new StringBuilder();
                            SbProvince.Append(
"<select name=\"SProvince\" id=\"SProvince\"  οnchange=\"changeProvince('SProvince','CityTD');\">");
                            SbProvince.Append(
"<option value=''>请选择省份</option>");
                            
for (int i = 0; i < ProvinceList.Count; i++)
                            {
                                SbProvince.Append(
"<option value='" + ProvinceList[i].ID + "'>" + ProvinceList[i].ChineseText + "</option>");
                            }
                            SbProvince.Append(
"</select>");
                            Cache.Insert(
"Province", SbProvince.ToString(), null, DateTime.Now.AddMinutes(5), TimeSpan.Zero);
                            Response.Write(Cache[
"Province"].ToString());
                            
//Response.Write(SbProvince.ToString());
                        }
                        
else
                        {
                            Response.Write(Cache[
"Province"].ToString());
                        }
                        
break;
                    
//默认无返回
                    default:
                        
//如果传入为GUID,刚返回下线数据,主要为省市二级联动服务
                        try
                        {
                            
new Guid(Request["type"].ToString());
                            List
<XbDataLabelItem> CityList = new List<XbDataLabelItem>();
                            List
<string> SearchCity = new List<string>();
                            SearchCity.Add(
"ParentID='" + Request["type"].ToString() + "'");
                            CityList 
= XbDataLabelBPM.SelectDataLabelItemList(SearchCity.ToArray(), "ChineseText,ID""ChineseText"-10"ID");
                            StringBuilder SbCity 
= new StringBuilder();
                            SbCity.Append(
"<select name=\"SCity\" id=\"SCity\">");
                            SbCity.Append(
"<option value=''>请选择城市</option>");
                            
for (int i = 0; i < CityList.Count; i++) {
                                SbCity.Append(
"<option value='" + CityList[i].ID + "'>" + CityList[i].ChineseText + "</option>");
                            }
                            SbCity.Append(
"</select>");
                            Response.Write(SbCity.ToString());
                        }
                        
catch { }
                        
break;
                }
            }
        }
    }

转载于:https://www.cnblogs.com/Miler/archive/2009/03/18/1415165.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax 省市二级联动一种常见的前端技术,它可以实现在选择省份后,自动加载该省份下的城市列表,从而实现省市二级联动的效果。下面是一个简单的实现步骤: 1. 在 HTML 页面中,定义两个下拉框,一个用于选择省份,一个用于选择城市。 2. 在 JavaScript 中,使用 Ajax 技术向服务器请求省份列表,并将其填充到省份下拉框中。 3. 当用户选择省份时,使用 Ajax 技术向服务器请求该省份下的城市列表,并将其填充到城市下拉框中。 下面是一个简单的代码示例: HTML 代码: ``` <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> ``` JavaScript 代码: ``` // 请求省份列表 $.ajax({ url: '/api/provinces', success: function(data) { // 将省份列表填充到省份下拉框中 var $province = $('#province'); $.each(data, function(index, province) { $province.append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 当用户选择省份时,请求该省份下的城市列表 $('#province').on('change', function() { var provinceId = $(this).val(); if (provinceId) { $.ajax({ url: '/api/cities?provinceId=' + provinceId, success: function(data) { // 将城市列表填充到城市下拉框中 var $city = $('#city'); $city.empty().append('<option value="">请选择城市</option>'); $.each(data, function(index, city) { $city.append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { // 如果用户选择了“请选择省份”,则清空城市下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值