jQuery技术——根据省份的选择动态加载相应城市

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中间加一个形如<inputtype='hidden'id='"+cityId+"'name='XXXVO.city'value='"+setcity+"'/>的隐藏域.

2.checkbox的value值只是被后台根据name来进行提交的,并不用于显示出来,所以需加一个span控件显示.