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

来源：互联网发布：层次聚类算法编辑：程序博客网时间：2024/05/22 07:51

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信息去数据库查询，然后用字符串注入到相应的位置。

0 0