jQuery技术是js技术的一个框架,可以利用它强大的功能动态显示一些控件.下面是一个非常有意思和实用的情境,对于巩固jQuery技术十分有用,我们也可以充分体会到其强大之处!
情景假设:现有一个页面,
1.要求先加载所有省份的复选框(其中包含一个*的checkbox,当选择此项时,表明不特指某个省份,将加载所有城市).如果勾选或取消勾选某一省份的复选框时,会加载或去除对应的城市复选框;
同时,会显示已选择的省份。
2.勾选或取消勾选某一城市的复选框时,会显示已选择的城市.
需要注意的问题:
1.如果已经选择了某一特定省份时,并不允许再选择*,因为逻辑上并不成立;同理,如果事先选择*时,再选择某一省份也是不允许的.除非取消勾选.(即*和特定省份不能同时选中)
2.根据省份"过滤"相应城市,是为了避免使用ajax技术把省份ID传给后台引起交互.
3.<s:iterator/>标签在js中的运用.
后台数据库肯定有获取省份列表和城市列表的方法.table_province含有id,name字段(如果id=-1 对应*);而table_city含有id,name,parentId字段(parentId对应该城市所在省份的id)
html页面:
<table width="70%" border="0" cellpadding="2" cellspacing="1" class="tb_input">
<tr >
<td nowrap="nowrap" class="td_title">选择省份:<font color="red">*</font></td>
<td colspan="3">
<div id="div_provIds">
<ul id="provIds">
</ul>
</div>
</td>
</tr>
<tr>
<td nowrap="nowrap" class="td_title" valign="top" >选择地市</td>
<td nowrap="nowrap" colspan="3">
<div id="div_city">
<ul id="notFeeCityIds">
</ul>
</div>
</td>
</tr>
<tr ><td nowrap="nowrap" class="td_title">已选择的省份:<font color="red">*</font></td>
<td nowrap="nowrap" colspan="3" >
<div id="div_prv">
<ul id="feeprovIds">
</ul>
</div>
</td>
</tr>
<tr ><td nowrap="nowrap" class="td_title">已选择的城市:<font color="red">*</font></td>
<td nowrap="nowrap" colspan="3">
<div id="div_city">
<ul id="feecityIds">
</ul>
</div>
<!-- <textarea id="city" name="cpServiceAreaVO.city" cols="40" rows="5" ><s:property value="cpServiceAreaVO.city"/>,</textarea>-->
</td>
</tr>
</table>
获得省份列表和城市列表的js:
//省份列表
var provList = new Array();
<s:iterator value="#Policy.provinceList" >
var str = new Array();
str.push('<s:property value="id" />');
str.push('<s:property value="name"/>');
provList.push(str);
</s:iterator>
//城市列表
var cityList = new Array();
<s:iterator value="Policy.cityList" >
var str = new Array();
str.push('<s:property value="id" />');
str.push('<s:property value="name" />');
str.push('<s:property value="parentId" />');
cityList.push(str);
</s:iterator>
加载省份复选框列表的js:
setProv();
function setProv() {
var provId = 0;
var provName = '';
for(var i=0; i<provList.length; i++) {
provId = provList[i][0];
provName = provList[i][1];
jQuery("#provIds").append("<li><input type='checkbox' name='prov' id='prov'"+provId+" value='"+provName+" onclick=filterCity("+provId+")'/> <span id='provName"+provId+"'>"+provName+"</span></li>");
}
}
根据省份过滤出相应城市,并组成复选框控件列表:
function filterCity(provId) {//注意checkbox的onclick事件包括"点击选中"和"点击取消选中"两种状态
//step1.处理显示对应城市
if(provId != -1) {//没有选择*
if(jQuery("#provId-1").attr("checked") == true) {//说明是在在*选中的情况下再选择某一具体省份的
alert("已选择(*),不需要设置具体省份!");
jQuery("#provId"+provId).attr("checked").remove();
}else{//说明之前选择的就不是*,而是第一次或再一次选择某一具体省份
for(var i=0; i<cityList.length; i++) {//遍历城市的处理
if(cityList[i][2] == provId) {//找出所选省份对应的城市
var cityId = cityList[i][0];
var cityName = cityList[i][1];
var parentId = cityList[i][2];
if(jQuery("#provId"+provId).attr("checked") == true) {//选中状态
jQuery("#notFeeCityIds").append("<li><input type='checkbox' id='cityId"+cityId+"' value='"+cityId+"' name='cityId' onclick='changeCity("+cityId+")'><span id='cityName"+cityId+"'>"+cityName+"</span></li>");
}else{//取消勾选
jQuery("#cityId"+cityId)remove();
}
}
}
}
}else if(provId == -1) {//选择了*
var provPackagebox = document.getElementsByName("prov");
for(var i=0; i<provPackagebox.length; i++) {
if(provPackagebox[i].checked == true) {//说明是在具体省份已选中的情况下选择*的(provId=-1)
alert("已选择具体省份,不能再设置(*)");
jQuery("provId-1").attr("checked").remove();
break;//一旦发现有选中的具体省份,就跳出循环
}
}
for(var i=0; i<cityList; i++) {
if(cityList[i][2] == provId) {
var cityId = cityList[i][0];
var cityName = cityList[i][1];
var parentId = cityList[i][2];
if(jQuery("#provId"+provId).attr("checked") == true) {//选中状态
jQuery("#notFeeCityIds").append("<li><input type='checkbox' id='cityId"+cityId+"' value='"+cityId+"' name='cityId' onclick='changeCity("+cityId+")'><span id='cityName"+cityId+"'>"+cityName+"</span></li>");
}else{//取消勾选
jQuery("#cityId"+cityId).remove();
}
}
}
}
//step2.处理显示[已选省份]
if(jQuery("#provId"+provId).attr("checked") == true) {
var provTxt = jQuery("#provName"+provId).text();//获取已选择省份的span中的值
jQuery("#feeProvIds").append("<li id='li_provId"+provId+"'><span id='show_provName"+provId+"' >"+provTxt+"</span></li>");
}else{
jQuery("#li_provId"+provId).remove();
}
}
根据所选城市与否,显示出所选择的城市的js:
function changeCity(cityId) {
if(jQuery("#cityId"+cityId).attr("checked") == true) {
var cityTxt = jQuery("#cityName"+cityId).text();
jQuery("#feeCityIds").append("<li id='li_cityId"+cityId+"'><span id='show_cityName"+cityId+"'>"++"</span></li>");
}else{
jQuery("#li_cityId"+cityId).remove();
}
}
特别注意:
1.如果要将所选择的城市和省份的值提交到后台,建议在显示所选省份和城市的li中间加一个形如<input type='hidden' id='"+cityId+"' name='XXXVO.city' value='"+setcity+"' />的隐藏域.
2.checkbox的value值只是被后台根据name来进行提交的,并不用于显示出来,所以需加一个span控件显示.
分享到:
相关推荐
jquery 分页——jqueryPage.js
jQuery游戏——小鸟飞行
jquery省份城市选择器 使用方便 界面简洁,速度快
jQuery实现图片动态加载效果 鼠标滚动时图片动态加载
jqueryeasyui——1.25jar包该框架功能很强大,用好了做出来的项目真是美观方便,学业简单快
本人这段时间正巧要做一个省市县的树状结构图,公司之前用的dtree实现起来效率太低,半天打不开页面,于是考虑用jquery动态加载,通过网上查资料,学习别人的列子,现将本人所整理的树状结构实例上传。测试数据库为...
简单好用的jQuery插件——Tdrag.js可以任意拖拽div内容.zip
jquery图片加载动画——queryloader2 兼容所有浏览器
jquery经验总结——页面加载事件ready(fun)
一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择
《众妙之门——JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine,其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分,第一部分阐述JavaScript的实战经验,共7章,内容涉及...
jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动动态加载图片jQuery通过滚轮滚动...
jQuery移动端下拉刷新、上拉加载更多插件,实现移动端常见的下拉刷新和上拉加载更多功能。
jQuery 省份 城市 联动jQuery 省份 城市 联动
jQuery validation 1.6.zip 包括全部类库和一些demo。
jquery ztree 异步动态加载部署直接运行,大数据量,异步是很好的处理方式
自己封装的实现无限级别延展功能的多级菜单,扩展源码简单,适合初学者学习。(不喜勿喷)
jquery 动态加载树
jQuery的一个小案例,可以帮助同学理解和学习jQuery!
jquery插件 提示框 用法: 注意:因为没有使用css文件,而且在jquery.tooltip.js里通过对象的形式定义css,所以使用时,需要修改jquery.tooltip.js里的图片路径。