jquery操作下拉框

  如图是新增地区时候用jquery操作下拉框。

父地区名称中两个下拉框分别表示为省，市地区。当我选中省级下拉框时候异步查询出市级数据放在市级下拉框内并最先展示请选择，地区编码参照及地区级别都是异步查询出来的。

 

 

当我再次将市级下拉框选中为“---请选择---” 则清空所有数据令省级下拉框选中为“----请选择----”

 

 $('#newsupnamesheng').val('-1');   

 

 <table width="100%" border="0" cellpadding="0" cellspacing="0" class="you_01">
    <tr>
      <td width="14"><img src="images/010.jpg" width="14" height="34" /></td>
      <td align="left" valign="middle" class="you_01" id="xinzengxiugai"><strong>新增地区</strong></td>
    </tr>
  </table>
                                  <table width="100%" border="1" align="center"
								bordercolor="#c6ecda" cellspacing="1" cellpadding="2"   >
                                  <tr>
                                                            
                                    <td height="28" align="right" class="biao_01"> 父地区名称 </td>
                                    <td height="28" align="left"><input type="hidden" name="areaid" id="areaid" class="biao_01">
                                        <select id="newsupnamesheng" name="newsupnamesheng"
											style="display: inline;" onChange="provincename(this.value)">
                                          <option value="-1"> ---请选择--- </option>
                                        </select>
                                        <input type="text" id="newsupnamesheng1"
											name="newsupnamesheng1" style="display: none;"
											disabled="disabled">
                                        <select id="newsupnameshi" name="newsupnameshi"
											style="display: inline;" onChange="city(this.value)">
                                          <option value="-1"> ---请选择--- </option>
                                        </select>
                                    </td>
                                    <td height="28" align="right" class="biao_01"> 参照地区编码 </td>
                                    <td height="28" align="left" class="biao_01"><input type="text" id="areasupcode" name="areasupcode"
											disabled="disabled">
                                    </td>
                                    <td height="28" align="right" class="biao_01"> 地区编码 </td>
                                    <td height="28" align="left" class="biao_01"><input type="text" id="areacode" name="areacode"  />
                                    </td>
                                  </tr>
                                  <tr>
                                    <td height="28" align="right"> 地区名称 </td>
                                    <td height="28" align="left"><input type="text" id="areaname" name="areaname" />
                                    </td>
                                    <td height="28" align="right"> 地区级别 </td>
                                    <td height="28" align="left"><select id="arealevel" name="arealevel"
											style="display: inline;" onChange="">
                                        <option value="-1"> ---请选择--- </option>
                                        <!--    <option value="2"> 省级 </option>
                                        <option value="1"> 市级 </option>
                                        <option value="0"> 县级 </option> -->
                                     
                                      </select>
                                        <input type="text" id="arealevel1" name="arealevel1"
											style="display: none;" disabled="disabled">
                                    </td>
                                    <td height="28" align="right" class="biao_01"> 邮编 </td>
                                    <td height="28" align="left" class="biao_01"><input type="text" id="areazip" name="areazip" />
                                    </td>
                                    <td height="28" align="right">&nbsp;</td>
                                    <td height="28" align="left"><div id="saveareadiv"> <a class="l-btn" onMouseOver="window.status='';return true"
												onClick="return saveOne();"> <span class="l-btn-left"> <span
													class="l-btn-text">保存</span> </span> </a> </div>
                                        <div style="display: none;" id="editdictypediv"> <a class="l-btn" onMouseOver="window.status='';return true"
												onClick="doupdate();"> <span class="l-btn-left"> <span class="l-btn-text">修改</span> </span> </a> </div></td>
                                    <input type="hidden" id="supid" name="supid"/>
                                    <input type="hidden" id="areasupid" name="areasupid"/>
                                </table>

 

script:

	<script language="javascript" type="text/javascript">
		function provincename(id){
		    getsupcode(id,'province');
		    if(eval(id)==1)
		    {
		        $('#arealevel').empty();
		        $('#arealevel').append("<option  value='-1' selected='selected'>---请选择---</option>");	
		    	$('#arealevel').append("<option  value='2' selected='selected'>---省级 ---</option>");	
		    }
		    else
		    if(eval(id)==-1)
		    {
		    	 $('#arealevel').empty();
		   		 $('#arealevel').append("<option  value='-1' selected='selected'>---请选择---</option>");
		    }
		    else if(eval(id)>1)
		    {
		    
		    $('#arealevel').empty();
		        $('#arealevel').append("<option  value='-1' selected='selected'>---请选择---</option>");
		    	$('#arealevel').append("<option  value='1' selected='selected'>---市级 ---</option>");
		    }
		    
		    
		    
		        $('#newsupnameshi').empty();
		    	$('#newsupnameshi').append("<option  value='-1' selected='selected'>---请选择---</option>");				    										          
			  $.post("areaAction!listCityname.action",{supid:id},function(data){	
			  
						var json=eval(data);															
						for(var i = 0,len = json.length; i<len; i++){
							if(id==json[i].id){						
								$('#newsupnameshi').append($("<option value='"+json[i].id+"' selected='selected' >"+json[i].name+"</option>"));						
							}else{	
								$('#newsupnameshi').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
							}					
						}
					},"json");
		 	 document.getElementById('areasupid').value=id;
		}
	function city(id){
	  getsupcode(id,'city');
	  document.getElementById('areasupid').value=id;
	  
	  if(eval(id)<1)
	  {
	  	$('#arealevel').empty();
		$('#arealevel').append("<option  value='-1' selected='selected'>---请选择---</option>");	
		$('#areasupcode').val("");
		$('#areacode').val("");	 
		$('#newsupnamesheng').val('-1');
		
	  }
	  
	  else if(eval(id)>1)
	  {
	  	$('#arealevel').empty();
       $('#arealevel').append("<option  value='-1' selected='selected'>---请选择---</option>");	
    	$('#arealevel').append("<option  value='0' selected='selected'>---县级 ---</option>");	 
	  }
	  	
	}
    function getsupcode(selectareasupid,param){
		$.post("areaAction!getSupCode.action",{selectareasupid:selectareasupid,param:param},function(data){
			var json=eval(data);
			$('#areasupcode').val(json[0].code);
			$('#areacode').val(json[1].code2);
			
		});
	}
    
	function query(){
		$('#downlistform').submit();
		return true;
	}

	function goPage(pageNum,pageCount){
		if(pageNum<=0){
			pageNum=1;
		}
		if(pageNum>pageCount){
			pageNum=pageCount;
		}
		var currPageNum=$('#currPageNum').val(pageNum);
		
	 if(event.keyCode == 13)       
    {
		query();
    	event.returnValue = false;    
    }   
	}

	function saveOne(){
		var areasupid=$('#areasupid').val();
		var areaname=$('#areaname').val();
		var areacode=$('#areacode').val();
		var arealevel=$('#arealevel').val();
		var areazip=$('#areazip').val();
		if(areacode=="")
		{
			alert('地区编码不能为空');
			return false;
		}
		if(arealevel==-1)
		{
			alert('请选择地区级别!');
			return false;
		}
		if(areaname=="")
		{
			alert('新增地区名称不能为空!');
			return false;
		}
		//alert("saveOne()"+areasupid+""+areaname+""+areacode+""+arealevel+""+areazip);
		/*if(newsupname==0){
			alert('父类别不能为空!');
			//$('#newsupname').css("border","1px solid").css("borderColor","red");
			$('#newsupname').focus();
			return;
		}
		if(dictypename==""){
			alert('类别名称不能为空!');
			//$('#dictypename').css("border","1px solid").css("borderColor","red");
			$('#dictypename').focus();
			return;
		}*/

		$.post("areaAction!saveArea.action",{areasupid:areasupid,areaname:areaname,areacode:areacode,arealevel:arealevel,areazip:areazip},function(data){
			alert(data);
			window.location.href=window.location.href;
		});
	}

	function areaupdate(id,code,name,zip,arealevel,supid,supname)
	{
	   $('#saveareadiv').css('display','none'); 
	   if($('#mydictypediv').css('display')=="none"){
			$('#mydictypediv').css('display','inline');
		}
		$('#xinzengxiugai').html("<strong>修改地区</strong>");
		$('#savedictypediv').css("display","none");
		$('#editdictypediv').css("display","inline");
		$('#newsupnamesheng').css('display','none');
		$('#newsupnamesheng1').css('display','inline');
		$('#newsupnameshi').css('display','none');
		$('#areaid').val(id);
		$('#areacode').val(code);		
		$('#areaname').val(name);
		$('#areazip').val(zip);
		$('#supid').val(supid);
		$('#areasupcode').val(code);
		$('#newsupnamesheng1').val(supname);
		$('#arealevel').css('display','none');
		$('#arealevel1').css('display','inline');
		$('#arealevel1').val(arealevel);		
	}
	function doupdate(){
	    var areaid=$('#areaid').val();
		var areacode=$('#areacode').val();
		var areaname=$('#areaname').val();
		var areasupid = $('#supid').val();
		var arealevel = $('#arealevel1').val();
		var areazip=$('#areazip').val();
		if(newsupnamesheng==0){
			alert('父类别名称不能为空!');
			$('#newsupnamesheng2').focus();
		}

		
		/*if(dictypename==""){
			alert('类别名称不能为空!');
			$('#dictypename').focus();
			//$('#dictypename').css("border","1px solid").css("borderColor","red");
			return;
		}*/
		$.post("areaAction!modifyArea.action",{areaid:areaid,areacode:areacode,areaname:areaname,areazip:areazip,arealevel:arealevel,areasupid:areasupid},function(data){
			alert(data);
			window.location.href=window.location.href;
			$('#mydictypediv').css('display','none');
		});
	}

	
		$(function(){
		  $.post("areaAction!listAreaSupname.action",function(data){
			var spname="<%=request.getAttribute("supname")%>";
				var json=eval(data);
				for(var i = 0,len = json.length; i<len; i++){
					if(spname==json[i].name){
						$('#newsupnamesheng').append($("<option value='"+json[i].id+"' selected='selected' >"+json[i].name+"</option>"));						
					}else{						
						$('#newsupnamesheng').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
					}
					
				}
			},"json");				
		});
	</script>