关于下拉框切换取值的例子

1，对面2个相关联的下拉框有联系的查询切换的JS代码

效果如下

先看JSP代码

<tr>
								<td style="width:75px;text-align: right;padding-top: 13px;">所属楼栋:</td>
								<td>
									<select οnchange="onchangeShow(this.value)"  name="BUILDING_ID" id="BUILDING_ID" value="${pd.BUILDING_ID}" maxlength="255" placeholder="这里输入所属楼栋" title="楼栋地理位置" style="width:98%;">
										<c:if test="${null==pd.BUILDING_ID||''==pd.BUILDING_ID}">
											<option value="-1">--请选择--</option>
										</c:if>
										<c:forEach items="${builds }" var="b">
											<c:if test="${b.BUILDING_ID==pd.BUILDING_ID}">
												<option value="${b.BUILDING_ID }" selected="selected">${b.BUILDING_NAME }</option>
											</c:if>
											<c:if test="${b.BUILDING_ID!=pd.BUILDING_ID}">
												<option value="${b.BUILDING_ID }" >${b.BUILDING_NAME }</option>
											</c:if>
										</c:forEach>
									</select>
								</td>
							</tr>
							<tr>
								<td style="width:75px;text-align: right;padding-top: 13px;">所属地址:</td>
								<td>
									<input type="hidden" name="ADDRESS" id="ADDRESS" value="${pd.ADDRESS_ID}" />
									<select disabled="disabled" name="ADDRESS_ID" id="ADDRESS_ID" value="${pd.ADDRESS_ID}" maxlength="255" placeholder="这里输入地址" title="楼栋具体地址" style="width:98%;">
										
									</select>
								</td>
							</tr>

首先楼栋和地址都要显示出默认值，所以，页面ajax就率先加载楼栋资源，根据楼栋再返回地址信息

<pre name="code" class="html">	$(function(){
			if($("#BUILDING_ID option:selected").size()>0){
				var BUILDING_ID=$("#BUILDING_ID").val();
				$.ajax({
					url : "<%=basePath%>address/listAddressByBuildID.do?BUILDING_ID="+BUILDING_ID,
					//data : {BUILDING_ID : BUILDING_ID}, // 参数
					type : "get",
					cache : false,
					dataType : "json", //返回json数据
					error: function(){
						alert('error');
					}, 
					success : function(data){
						  $('#ADDRESS_ID').removeAttr("disabled");
						  $('#ADDRESS_ID').empty();   //清空resText里面的所有内容
	                      var opt = ''; 
	                      $.each(data, function(commentIndex, comment){
                    	  	if($("#ADDRESS").val()==comment.ADDRESS_ID){
                    	  		opt += '<option class="a" selected="selected" value="'+comment.ADDRESS_ID+'">' +comment.ADDRESS_PATH+'</option>';
                    	  	}else{
                    	  		opt += '<option class="a" value="'+comment.ADDRESS_ID+'">' +comment.ADDRESS_PATH+'</option>';
                    	  	}
	                      });
	                      $('#ADDRESS_ID').html(opt);
					}
				});
			}			
		});

然后根据查询出的楼栋查询出地址的信息。

如果是需要JS根据楼栋号切换地址的，那么就需要加入onchange（id）的事件

$(top.hangge());	
		function onchangeShow(BUILDING_ID){
			$.ajax({
				url : "<%=basePath%>address/listAddressByBuildID.do?BUILDING_ID="+BUILDING_ID,
				//data : {BUILDING_ID : BUILDING_ID}, // 参数
				type : "get",
				cache : false,
				dataType : "json", //返回json数据
				error: function(){
					alert('error');
				}, 
				success : function(data){
					  $('#ADDRESS_ID').removeAttr("disabled");
					  $('#ADDRESS_ID').empty();   //清空resText里面的所有内容
                      var opt = ''; 
                      $.each(data, function(commentIndex, comment){
                    	  	opt += '<option class="a" value="'+comment.ADDRESS_ID+'">' +comment.ADDRESS_PATH+'</option>';
                      });
                      $('#ADDRESS_ID').html(opt);
				}
			});
		}

根据ID信息去数据库查询，然后用字符串注入到相应的位置。