美文网首页
一:AJAX实现二级城市列表联动下拉选择

一:AJAX实现二级城市列表联动下拉选择

作者: JasonYan025 | 来源:发表于2016-12-07 09:37 被阅读0次

    1.数据库设计

    省份字段 市级字段

    其中provinceId为外联,保持多个市对应一个省。

    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选框发生改变时执行)

    $(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);
        }
    %>
    

    相关文章

      网友评论

          本文标题:一:AJAX实现二级城市列表联动下拉选择

          本文链接:https://www.haomeiwen.com/subject/upddmttx.html