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

jQuery技术是js技术的一个框架,可以利用它强大的功能动态显示一些控件.下面是一个非常有意思和实用的情境,对于巩固jQuery技术十分有用,我们也可以充分体会到其强大之处!

情景假设:现有一个页面,
1.要求先加载所有省份的复选框(其中包含一个*的checkbox,当选择此项时,表明不特指某个省份,将加载所有城市).如果勾选或取消勾选某一省份的复选框时,会加载或去除对应的城市复选框;
同时,会显示已选择的省份。
2.勾选或取消勾选某一城市的复选框时,会显示已选择的城市.

需要注意的问题:
1.如果已经选择了某一特定省份时,并不允许再选择*,因为逻辑上并不成立;同理,如果事先选择*时,再选择某一省份也是不允许的.除非取消勾选.(即*和特定省份不能同时选中)
2.根据省份"过滤"相应城市,是为了避免使用ajax技术把省份ID传给后台引起交互.
3.标签在js中的运用.

后台数据库肯定有获取省份列表和城市列表的方法.table_province含有id,name字段(如果id=-1 对应*);而table_city含有id,name,parentId字段(parentId对应该城市所在省份的id)

html页面:

	

			
选择省份:*
	
			

			
            

                    

                    
                    
			
			
		    
	
		    

			
选择地市
			 
            

	             

	                    

	                  
	                    
	              
            
		    
	
			
已选择的省份：*
			 
	            

	            

		           

		                  
		           
		        
            
		
		
		
已选择的城市：*
			 
            

             

	                    

	                  
	                    
	          
            
            
		

获得省份列表和城市列表的js:
      

 //省份列表
	var provList = new Array();
	
		var str = new Array();
		str.push('');
		str.push('');
		provList.push(str);
	
	
	//城市列表
	var cityList = new Array();
	
		var str = new Array();
		str.push('');
		str.push('');
		str.push('');
		cityList.push(str);
	

加载省份复选框列表的js：

setProv();
	
	function setProv() {
		var provId = 0;
		var provName = '';
		for(var i=0; i "+provName+"");
		}
	}

根据省份过滤出相应城市,并组成复选框控件列表:

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"+cityName+"");
						}else{//取消勾选
							jQuery("#cityId"+cityId)remove();
						}
					}
				}
			}
		}else if(provId == -1) {//选择了*
			var provPackagebox = document.getElementsByName("prov");
			for(var i=0; i"+cityName+"");
					}else{//取消勾选
						jQuery("#cityId"+cityId).remove();
					}
				}
			}
		}
		
		//step2.处理显示[已选省份]
		if(jQuery("#provId"+provId).attr("checked") == true) {
			var provTxt = jQuery("#provName"+provId).text();//获取已选择省份的span中的值
			jQuery("#feeProvIds").append("
"+provTxt+"
");
		}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("
"++"
");
		 }else{
		 	jQuery("#li_cityId"+cityId).remove();
		 } 
	}

特别注意:
1.如果要将所选择的城市和省份的值提交到后台,建议在显示所选省份和城市的li中间加一个形如的隐藏域.
2.checkbox的value值只是被后台根据name来进行提交的,并不用于显示出来,所以需加一个span控件显示.