jq+ajax获取数据库里头的省市区联动三级搜索菜单

最新推荐文章于 2021-08-05 14:40:16 发布

草灯

最新推荐文章于 2021-08-05 14:40:16 发布

阅读量2.9k

点赞数 1

分类专栏： web前端文章标签： ajax asp

本文链接：https://blog.csdn.net/eadio/article/details/40300889

版权

web前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

前阶段，在写界面的时候，碰到一个问题，检索出客户的列表我需要制作一个搜索菜单，关于检索省市区下的客户展示列表，一开始是想使用现有的js插件就好，但是他是吧数据都全部取出来放入对应的变量里头，在分别传入下拉框里头，后来我思考是否能用ajax获取数据展示，于是自己就动手写了个jq+ajax获取表里的地区字段显示出来，这里方便说明，我就把字段单独到一个access的表里了。当然我这个是asp语言的，用到也就是是在获取表单下拉区域字段而已，其他语言大同小异，只要ajax写好了，基本都没问题。
至于整个检索表单的实现我分三步走，第一步，表的数据，第二部，html界面先搭建好，第三步，ajax操作表数据

第一步，我先设计了个access数据库，做了一张存储省市区字段的表，至于其他字段就没给出了，重点是在于地区的字段。。。

表的设计：

第二步，html界面代码：如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>检索地区</title>
<style type="text/css">
    .wzss{ margin:50px;}
</style>
</head>



<body>


<div class="wzss" id="jmls">
    <div class="wzssbox">
        <span style="float:left;">微站搜索:</span>
        <form name="formsea" action="index.asp#jmls" method="post">
            <input class="wzss1" type="text" οnfοcus="if(this.value=='姓名'){this.value='';}" οnblur="if(this.value==''){this.value='姓名';}" name="wxtxt"<% if wxtxt <> "" then %> value="<% =wxtxt %>"<% else %> value="姓名"<% end if %> />
            <select class="wzss2" id="province" name="province" data-click="changeCity">
                <option value ="0">省份选择</option>
            </select>
            <select class="wzss2" id="city" name="city" data-click="changeArea">
                <option value ="0">城市选择</option>
            </select>
            <select class="wzss2" id="area" name="area">
                <option value ="0">地区选择</option>
            </select>
            <input class="wzss3" type="submit" name="submit" value=" 搜索 " />
        </form>
    </div>
</div>


</body>
</html>

初始化的界面是这样的：

第三步，ajax操作数据

<script language="javascript">
    $(document).ready(function(e) {
        //这个是下拉选中的时候触发事件
        $("#province, #city").change(function(e) {
            var wxact = $(this).attr("data-click");
            var wxid = $(this).children("option:selected").val();
            
            fun_ajax(wxact, wxid, 0);
        });        
        
        function fun_ajax(action, value, selectedid){
            //alert(action)
            $.ajax({                
                url : "getdata.asp",
                type : "POST",
                data : {"act" : action, "wxareaid" : value, "selectedid" : selectedid},
                async: false,
                success : function(msg){
                    //alert(msg)
                    var data = msg.split("|||");
                    if(data[0] == 0){
                        $("#province").empty();      //清空下拉框先
                        $("#province").append(data[1]);
                    }
                    else if(data[0]==1){
                        $("#city").empty();      //清空下拉框先
                        $("#city").append(data[1]);
                    }else if(data[0]==2){
                        $("#area").empty();
                        $("#area").append(data[1]);
                    }
                },
                error: function(){
                    alert('请选择省份');
                }
            });
        }

        //初始化下拉框
        var selectedid1 = <% =wxarea1 %>;      //province
        var selectedid2 = <% =wxarea2 %>;     //city
        var selectedid3 = <% =wxarea3 %>;    //area

        fun_ajax("selectedProvince", 0, selectedid1);
        if(selectedid2 > 0){
            fun_ajax("selectedCity", selectedid1, selectedid2);
        }
        if(selectedid3 > 0){
            fun_ajax("selectedArea", selectedid2, selectedid3);
        }

        
        
        
    });
</script>

   我想着首先我们需要用到的值一个是触发的时候上一个下拉框传过来的值，还有一个是表单提交后显示选中需要用到的值，那么我怎么区分是选中还是触发的事件呢，于是我又多了一个动作存储，
   因此我的ajax需要三个数据。于是我把ajax写入到了fun_ajax函数里头，动作和下拉值都直接通过函数传入到ajax下，selectedProvince这个是一个动作名，表示我是表单传递过来的，而触发的动作我是写在html下通过点击的时候获取这个动作和值进行触发。

然后，
var selectedid1 = <% =wxarea1 %>;      //province
var selectedid2 = <% =wxarea2 %>;     //city
var selectedid3 = <% =wxarea3 %>;    //area
这三个是当我表单提交后选中的值，我直接传入到脚本里头进行下一步初始化和选中判断了。所以初始化省下拉框的时候这个selectedid1的值是0，而且也没有触发值，所以触发值都是0

   最后，显示数据都是在getdata.asp里面通过sql检索数据表实现，下面：

    if wxareaid = 0 and act = "selectedProvince" then
        sql = "select distinct AreaName1, Areaid1 from [Area] where AreaName1 <>''"
        str = "0|||<option value ='0'>省份选择</option>"
        
    else
        
        if act = "changeCity" or act = "selectedCity" then
            sql = "select distinct AreaName2, Areaid2 from [Area] where Areaid1="& wxareaid &" and AreaName2 <> ''"
            str = "1|||<option value ='0'>城市选择</option>"
            
        end if
        if act = "changeArea" or act = "selectedArea" then
            sql = "select distinct AreaName3, Areaid3 from [Area] where Areaid2="& wxareaid &" and AreaName3 <> ''"
            str = "2|||<option value ='0'>地区选择</option>"
        end if
    end if

sql语句的写法是这样的，我吧他们都写到一个页面，那么怎么判断是哪个下拉框的数据，我又封装了三个数字到str里头，等ajax函数调用成功callback函数里头我在通过split分割区分开来，

    if not rs.eof then
        selected = ""
        while not rs.eof
        
            if selectedid = 0 then
                selected = ""
            else
                if format_id(selectedid) = format_id(rs(1)) then
                    selected = " selected='selected'"
                else
                    selected = ""
                end if
            end if
            str = str & "<option value='"& rs(1) &"' "& selected &">"& rs(0) &"</option>"    
            rs.movenext
        wend
    end if

而选中状态则是直接通过传过来的selectedid来和areaid对比得到。。

最终演示结果：

到这里，就是整个下拉框触发和选中的写法了，源代码我已经传到附件上，具体点击下面：

http://download.csdn.net/detail/eadio/8059797

草灯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq+ajax获取数据库里头的省市区联动三级搜索菜单

前阶段，在写界面的时候，碰到一个问题，检索出客户的列表我需要制作一个搜索菜单，关于检索省市区下的客户展示列表，一开始本来是想着去网络找个插件装进去就好，又想着提升自己，于是自己也动手写了个jq+ajax获取表里的地区字段显示出来，这里方便说明，我就把字段单独到一个access的表里了。当然我这个是asp语言的，用到也就是是在获取表单下拉区域字段而已，其他语言大同小异，只要ajax写好了，基本都没问
复制链接

扫一扫

专栏目录