1.數(shù)據(jù)庫設計

省份字段

市級字段

其中provinceId為外聯(lián)，保持多個市對應一個省。

2.JSP代碼如下：

<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="bname" class="input-text" name="bname" style="width:346px;">
                <option value="">請選擇</option>
                    <%
                    String sql001="select * from b2016_qcw_province"; 
                    java.util.ArrayList rs001 = new java.util.ArrayList();
                    rs001 = db.getList(sql001);
                    if(rs001!=null){
                    java.util.Hashtable hash001 = new java.util.Hashtable();
                    for(int i=0;i<rs001.size();i++){
                    hash001 = (java.util.Hashtable)rs001.get(i);
                    String provinceId = str.notEmpty((String)hash001.get("provinceId"));
                    String provinceName = str.notEmpty((String)hash001.get("provinceName"));    
                    %>
                              <option value="<%=provinceId%>"><%=provinceName%></option>
                              <%
                    hash001=null;
                    }
                    }
                    rs001=null;
                %>
            </select>
            <select class="input-text" id="tname" name="tname" style="width:346px;" >
                <option value="">請選擇</option>
            </select>
            </div>
        </div>

3.JS代碼（當省份select選框發(fā)生改變時執(zhí)行）

$(function(){
    $("select[name='bname']").change(function(){
        
        var newstype1=$("select[name='bname']").eq(0).val();
        $.post("ajax/findTname.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='tname']").eq(0).html(htmls);
            }else{
            
                $("select[name='tname']").eq(0).html("<option value=\"0\">無</option>");
            }
        });
    });
});

4.findTnameAJAX處理頁代碼

<%
    String bid=str.notEmpty((String)request.getParameter("bid"));
    String sql="select * from b2016_qcw_city where provinceId = '"+bid+"'  order by cityId desc";

    //out.print(sql);
    java.util.ArrayList rs=new java.util.ArrayList();
    rs=db.getList(sql);
    
    String ids="";
    String names="";
    if(rs != null){
        java.util.Hashtable hash= new java.util.Hashtable();
        for(int i=0;i<rs.size();i++){
            hash=(java.util.Hashtable) rs.get(i);
            /************修改您要顯示的字段名*****************************/
            String SID=(String)hash.get("cityId");
            String SNAME=str.notEmpty((String)hash.get("cityName"));
            ids+=SID+",";
            names+=SNAME+",";
        }
        hash=null;
        rs=null;
    }
    //處理最后一個，
    if(!ids.equals("")){
        ids=ids.substring(0,ids.length()-1);
    }
    if(!names.equals("")){
        names=names.substring(0,names.length()-1);
    }
%>