基于jquery实现的省市区级联无ajax

 更新时间:2013年09月24日 09:24:44   投稿:whsnow  
省市区级联的实现方法有很多,在本文为大家介绍下如何使用jquery无ajax来实现,感兴趣的朋友可以参考下,希望对大家有所帮助

希望和大家一起学习,更希望能找一份好工作,我是PHP开发工程师

以下是代码页面

复制代码 代码如下:

<span rel="con_address" class="con_address">
#foreach($data in $conAddressBean.provinceCode)
<input type="hidden" rel="province" value="$data"/>
#end
#foreach($data in $conAddressBean.cityCode)
<input type="hidden" rel="city" value="$data"/>
#end
#foreach($data in $conAddressBean.countyCode)
<input type="hidden" rel="county" value="$data"/>
#end
<input id="dataCache" type="hidden"/>

<select rel="city" name="city">
<option value="-1" rel="template">请选择</option>
</select>

<select rel="county" rel="template" name="county">
<option value="-1">请选择</option>
</select>
</span>

以下是js代码

其中有专门保存数据的字符串
[code]
// JavaScript Document
$(document).ready(function(){
// 设置数据缓存 使用HashMap方式
cacheData(cityCountyStr);
cacheData(provinceCityStr);

$("select[rel='province']").change(dochangeSelect);
$("select[rel='city']").change(dochangeSelect);
setDefault();
});
function setDefault(){
$("[rel='con_address']").each(function(index){
//设置省的默认参数
var currentProValue = getCurrentValue("province",index);
setValue($(this),"province",index,currentProValue);

var currentCity = getCurrentValue("city",index);
doLoadSelect($(this).find("select[rel='province']"),currentCity);

var currentCounty = getCurrentValue("county",index);
doLoadSelect($(this).find("select[rel='city']"),currentCounty);
});
}
function getCurrentValue(relName,index){
return $("[rel='con_address']").eq(0).find("[rel='"+relName+"']:hidden").eq(index).attr("value");
}
function setValue(parsent,name,index,currentValue){
$(parsent).find("select[rel='"+name+"'] > option").each(function(){
if($(this).attr("value")==currentValue){
$(this).attr("selected","selected");
return false;
}
})
}

function doLoadSelect(obj,nexeDetaultValue){
var thisName = $(obj).find("option:selected").text();
var thisValue = $(obj).find("option:selected").attr("value");
//alert("thisName="+thisName+" thisValue="+thisValue);
$(obj).nextAll().each(function(){
$(this).find("option").eq(0).nextAll().remove();
});
if(thisValue=='-1'){
return ;
}
//获取下一级 所有的地区
var childrens = hashMap.Get(thisName);
//找到下一个select集合,按照省市区 排名的
var objThisSelect = $(obj).next().eq(0);
var template = $(objThisSelect).find("option").eq(0);
$(template).removeAttr("selected");
var childrensAttr = childrens.split(",");
var keyVal = "";
for(var i=0;i<childrensAttr.length;i++){
keyVal = childrensAttr[i].split(":");
var result = $(template).clone(true);
$(result).html(keyVal[0]);
$(result).attr("value",keyVal[1]);
if(nexeDetaultValue==keyVal[1]){
$(result).attr("selected","selected");
}
$(objThisSelect).append(result);
}
}
function dochangeSelect(){
doLoadSelect(this,"-1");
}

//将地名和数据库id做成键值对,cache到HashMap中
function cacheData(datas){
var splitArr = datas.split("&");
var temp = "";
var tempArr;
for(var i=0;i<splitArr.length;i++){
temp = splitArr[i];
tempArr = temp.split("=");
hashMap.Set(tempArr[0],tempArr[1]);
}
}

相关文章

  • JavaScript正则表达式中g标志详解

    JavaScript正则表达式中g标志详解

    正则的思想都是一样的,但是具体的写法会有所不同,下面这篇文章主要给大家介绍了关于JavaScript正则表达式中g标志的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • javascript操作ul中li的方法

    javascript操作ul中li的方法

    这篇文章主要介绍了javascript操作ul中li的方法,可实现鼠标经过li标签项对应改变背景色的功能,涉及javascript鼠标事件及页面元素属性的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • JS中的函数与对象的创建方式

    JS中的函数与对象的创建方式

    这篇文章主要介绍了JS中的函数与对象的创建方式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • JS组件Bootstrap Table布局详解

    JS组件Bootstrap Table布局详解

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table布局,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下
    2016-05-05
  • 原生js实现瀑布流布局

    原生js实现瀑布流布局

    这篇文章主要为大家详细介绍了原生js实现瀑布流布局的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 学习JavaScript设计模式之享元模式

    学习JavaScript设计模式之享元模式

    这篇文章主要为大家介绍了JavaScript设计模式中的享元模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS阻止事件冒泡的方法详解

    JS阻止事件冒泡的方法详解

    在本篇文章里小编给大家整理的是关于JS如何阻止事件冒泡的相关知识点内容,有需要的朋友们可以学习下。
    2019-08-08
  • webpack代码分片的实现

    webpack代码分片的实现

    代码分片是webpck打包工具所特有的一项技术,通过这项功能可以把代码按照特定的形式进行拆分,使用户不必一次全部加载,而是按需加载。本文就来详细介绍,感兴趣的可以了解一下
    2021-07-07
  • JavaScript里四舍五入函数round用法实例

    JavaScript里四舍五入函数round用法实例

    这篇文章主要介绍了JavaScript里四舍五入函数round用法,实例分析了round函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • three.js引入glsl文件并高亮显示代码的完整步骤

    three.js引入glsl文件并高亮显示代码的完整步骤

    这篇文章主要给大家介绍了关于three.js引入glsl文件并高亮显示代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03

最新评论