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

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

效果如下



先看JSP代码

<tr>
<td style="width:75px;text-align: right;padding-top: 13px;">所属楼栋:</td>
<td>
<select onchange="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信息去数据库查询，然后用字符串注入到相应的位置。