和之前的二級(jí)城市下拉列表類似，一般在后臺(tái)修改頁(yè)面，為優(yōu)化使用體驗(yàn)，當(dāng)點(diǎn)擊修改時(shí)，一般可以提前讀取出此條數(shù)據(jù)預(yù)先保存的一級(jí)類二級(jí)類。直接默認(rèn)選擇。

代碼如下：

<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">請(qǐng)選擇</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="">請(qǐng)選擇</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聯(lián)動(dòng)讀取代碼如下：

$(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(",");
                //保存最后結(jié)果
                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\">無(wú)</option>");
            }
        });
    });

});