三:读取二级菜单并设定默认值
2016-12-14 本文已影响0人
JasonYan025
和之前的二级城市下拉列表类似,一般在后台修改页面,为优化使用体验,当点击修改时,一般可以提前读取出此条数据预先保存的一级类二级类。直接默认选择。
代码如下:
<div class="row cl" >
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类:</label>
<div class="formControls col-xs-8 col-sm-9">
<select id="bid" class="input-text" name="bid" style="width:346px;">
<option value="2">请选择</option>
<%
String sql002="select * from b2016_qcw_big where type=1";
java.util.ArrayList rs002 = new java.util.ArrayList();
rs002 = db.getList(sql002);
if(rs002!=null){
java.util.Hashtable hash002 = new java.util.Hashtable();
for(int i=0;i<rs002.size();i++){
hash002 = (java.util.Hashtable)rs002.get(i);
String bidId = str.notEmpty((String)hash002.get("id"));
String bigTitle = str.notEmpty((String)hash002.get("title"));
%>
<option value="<%=bidId%>"
<%if(yiji.equals(bidId)){%>
SELECTED
<%}%>> <%=bigTitle%></option>
<%
hash002=null;
}
}
rs002=null;
%>
</select>
<select class="input-text" id="eid" name="eid" style="width:346px;" >
<option value="">请选择</option>
<%
String sql0="select * from b2016_qcw_big where type=2 and bid='"+yiji+"'";
java.util.ArrayList rs0 = new java.util.ArrayList();
rs0 = db.getList(sql0);
if(rs0!=null){
java.util.Hashtable hash0 = new java.util.Hashtable();
for(int i=0;i<rs0.size();i++){
hash0 = (java.util.Hashtable)rs0.get(i);
String eidID = str.notEmpty((String)hash0.get("id"));
String erjititle = str.notEmpty((String)hash0.get("title"));
%>
<option value="<%=eidID%>" <%if(erji.equals(eidID)){%>SELECTED<%}%>><%=erjititle%></option>
<%
hash0=null;
}
}
rs0=null;
%>
</select>
</div>
</div>
JS联动读取代码如下:
$(function(){
$("select[name='bid']").change(function(){
var newstype1=$("select[name='bid']").eq(0).val();
$.post("ajax/findEid.jsp",{bid:newstype1,leval:"1"},function(data){
data=$.trim(data);
if(data!=null&&data!="|"){
var ary=data.split("|");
var ids=ary[0];
var names=ary[1];
//保存最终html
var idsAry=ids.split(",");
var namesAry=names.split(",");
//保存最后结果
var htmls="<option value=\"0\">全部</option>";
for(var i=0;i<idsAry.length;i++){
htmls+="<option value='"+ idsAry[i] +"'>"+ namesAry[i] +"</option>";
}
$("select[name='eid']").eq(0).html(htmls);
}else{
$("select[name='eid']").eq(0).html("<option value=\"0\">无</option>");
}
});
});
});