jQuery+ajax实现省市区下拉菜单联动（增强版）实现锁定用户所在地并且可以直接选区

最新推荐文章于 2024-07-31 14:12:41 发布
WinterChen的博客
最新推荐文章于 2024-07-31 14:12:41 发布
阅读量2k
点赞数
本文链接：https://blog.csdn.net/Winter_chen001/article/details/68485771
版权
jQuery 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
ajax
7 篇文章 0 订阅
订阅专栏
之前做过一个省市区联动的下拉菜单，但是这个功能有一个缺陷，当有一个需求：
1.页面加载的时候锁定用户注册的所在地；
2.可以直接换区，不用等省份发生change时间之后才可以换区（之前版本的功能就只能这样）
直接上代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门店管理后台</title>
    <link rel="stylesheet" type="text/css" href="static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="static/css/commend.css">
    <link rel="stylesheet" type="text/css" href="static/css/search.css">
    <link rel="stylesheet" type="text/css" href="static/css/paging.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="static/js/echarts.js" type="text/javascript" ></script>
    <!-- <script src="static/js/city2.js"></script> -->
    <script type="text/javascript" src="static/js/citySelect2.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
                    getCityInfo();
                    getProvince();
                    //省市区ajax请求
                    function getProvince() {
                        $.ajax({
                            type : "post",
                            async : true,
                            url : "get_all_prov",
                            success : function(data) {
                                var data = eval('(' + data + ')');
                                addProvinceName(data.root);
                                changeCity();
                            },

                        });
                    }

                    $("#prov4").change(function() {
                        changeCity();
                    });

                    /* $("#city4").mouseenter(function() {
                        changeCity();
                    });
                    $("#area4").mouseenter(function() {
                        changeMarket();
                    }); */

                    function addProvinceName(data) {
                        $.each(data, function(v, o) {
                            var s = "<option value="+o.cityId+">" + o.cityName
                                    + "</option>";
                            $(s).appendTo($("#prov4"));

                        });

                    }

                    function changeMarket() {
                        var pId = $("#city4").val();
                        var areaId = $("#area4").val();    //当前用户所在的区号
                        //alert(pId);
                        $("#area4").empty();
                        $.post("menu_list_city_area", {
                            "shengOrShi" : pId
                        }, function(data) {
                            var data = eval('(' + data + ')');
                            for (var i = 0; i < data.root.length; i++) {
                                if(data.root[i].cityId == areaId){
                                $("#area4").prepend("<option value='"+data.root[i].cityId+"'>"+ data.root[i].cityName+ "</option> ");  //获取当前用户所在区并显示在select第一个option中
                                }else{
                                $("<option value='"+data.root[i].cityId+"'>"+ data.root[i].cityName+ "</option> ").appendTo($("#area4"));
                                }
                            }
                            $("#area4 option:first").prop("selected", 'selected');     //设置强制显示第一个option
                        });

                    }
                    $("#city4").change(function() {
                        changeMarket();
                    })

                    function changeCity() {
                        var pId = $("#prov4").val();
                        $("#city4").empty();
                        $.post("menu_list_city_area", {
                            "shengOrShi" : pId
                        }, function(data) {
                            var data = eval('(' + data + ')');
                            for (var i = 0; i < data.root.length; i++) {
                                $(
                                        "<option value='"+data.root[i].cityId+"'>"
                                                + data.root[i].cityName
                                                + "</option> ").appendTo(
                                        $("#city4"))
                            }
                            changeMarket();


                        });
                    }

                    getProjectInfo();
                });

        function getProjectInfo() {    //获取用户注册时选定的省市区
            $.ajax({
                type : "post",
                async : false,
                url : "findProjectHouse",
                data : {
                    sheng : $('#prov4').val(),
                    shi : $('#city4').val(),
                    qu : $('#area4').val(),
                    projectName : $('#projectName').val(),
                    isYouhui : $("input[name='isYouhui']:checked").val(), //这两个不管他，其他功能
                    isDaiKan : $("input[name='isDaiKan']:checked").val()
                },
                success : function(data) {
                    data = eval("(" + data + ")");
                    getFindProjectHouse(data.root);
                }
            });
        }
        function getCityInfo() {
            $.ajax({
                type : "post",
                async : false,
                url : "get_city_name_by_parent_id",
                success : function(data) {
                    var s1 = "<option value="+data.provId+">" + data.provName
                            + "</option>";
                    var s2 = "<option value="+data.cityId+">" + data.cityName
                            + "</option>";
                    var s3 = "<option value="+data.areaId+">" + data.areaName
                            + "</option>";
                    $(s1).appendTo($("#prov4"));
                    $(s2).appendTo($("#city4"));
                    $(s3).appendTo($("#area4"));
                }
            });
        }
        function getFindProjectHouse(data) {
            var s = '<tr><th>案场名称</th><th>开发商</th><th>均价</th><th>支持带看</th>';
            s += '<th>支持异地</th><th>快速结佣</th><th>带看佣金</th><th>分销佣金</th><th>优惠信息</th><th>操作</th></tr>';

            $.each(data, function(v, o) {
                s += '<tr><td>' + o.projectName + '</td><td>' + o.developer
                        + '</td><td>' + o.averagePrice + '</td>';
                if (o.isDaiKan == 0) {
                    s += '<td>否</td>';
                } else if (o.isDaiKan == 1) {
                    s += '<td>是</td>';
                } else if (o.isDaiKan == null) {
                    s += '<td></td>';
                }
                if (o.isYiDi == 0) {
                    s += '<td>否</td>';
                } else if (o.isYiDi == 1) {
                    s += '<td>是</td>';
                } else if (o.isYiDi == null) {
                    s += '<td></td>';
                }
                if (o.isFast == 0) {
                    s += '<td>否</td>';
                } else if (o.isFast == 1) {
                    s += '<td>是</td>';
                } else if (o.isFast == null) {
                    s += '<td></td>';
                }
                s += '<td>' + o.daiKanMoney + '</td><td>' + o.fenXiaoMoney
                        + '</td><td>' + o.information + '</td>';
                s += '<td><a href="zhongjieHouseList?projectId=' + o.projectId
                        + '">可售房源</a></td></tr>';
            });
            if (data.length > 0) {
                $('#pInfo').html(s);
            } else {
                $("#pInfo")
                        .html(
                                "<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
            }
        }

        function getSearchProject() {
            getProjectInfo();
        }
        function empty(){
            if($("#houseNum").val()==""){
                alert("请输入搜索条件");
                return false;
            }
        }
    </script>

</head>
<body>
    <!-- <header id="" class="index-header">
        <nav>
            <ul>
                <li><a href="index.html" title="" class="index-logo">中介门店管理后台</a></li>
                <li><a  href="index.html" title="">首页</a></li>
                <li><a  class="active" href="" title="">房源搜索</a></li>
                <li><a href="" title="">经纪人管理</a></li>
                <li><a href="" title="">客户管理</a></li>
                <li><a href="" title="">对账单</a></li>
                <li><a href="" title="">业务</a></li>
                <li><a href="" title="">欢迎您：<span>User</span></a></li>
            </ul>
        </nav>
    </header>/header -->
    <%@include file="../publicpage/shoppublicpage.jsp" %>

    <div class="contain">
        <nav>
            <ul class="lead-nav">
                <li><a href="to_store_index" title="">首页</a></li>
                <li><span>—</span></li>
                <li><a href="###" title="">房源搜索</a></li>
            </ul>
        </nav>
        <div class="btn-group">
            <!-- 案场搜索 -->
            <form action="" method="post" id="myForm">
                <!-- 市区联动 -->
                <div id="city_4">
                    <select name="sheng" class="prov" id="prov4" style="height:20px;width:70px">
                    </select>
                    <select name="shi" class="city" id="city4" style="height:20px;width:70px">
                    </select>
                    <select name="qu" class="dist" id="area4" style="height:20px;width:70px">
                    </select>
                </div>
                <input id="projectName" name="projectName" class="btn-text btn-text-1" placeholder="输入案场名称"></input>
                <button class="btn-search" type="button" onclick="getSearchProject()">搜索案场</button>
                <input name="isYouhui" type="checkbox" checked="checked" id="youhui">优惠案场</input>
                <input name="isDaiKan" type="checkbox" checked="checked" id="daikan">支持带看</input>
            </form>
            <form action="oneHouse" target="_blank" method="post" onsubmit="return empty()">
                <input name="houseNum" class="btn-text btn-text-2" placeholder="请输入APP上查看到的房源ID"  id="houseNum"></input>
                <button class="btn-search" type="submit" >搜索房源</button>
            </form>

        </div>
        <table class="message" id="pInfo">

        </table>




    </div>


    <script type="text/javascript" src="static/js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="static/js/query.js"></script>

    <script>
            // 市区二级联动
        /*  var selectVal = new CitySelect({
                data   : data,
                provId : "#prov4",
                cityId : '#city4',
                areaId : '#area4'
            }); */


//          var selectVa2 = new CitySelect({
//              data   : data,
//              provId : "#prov5",
//              cityId : '#city5',
//              areaId : '#area5',
//              isSelect: false
//          });


            // 分页功能


    </script>
</body>
</html>