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


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

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

表的设计:
jq+ajax获取数据库里头的省市区联动三级搜索菜单_第1张图片

    第二步,html界面代码:如下




检索地区








微站搜索:
"" then %> value="<% =wxtxt %>"<% else %> value="姓名"<% end if %> />


初始化的界面是这样的:
jq+ajax获取数据库里头的省市区联动三级搜索菜单_第2张图片


    第三步,ajax操作数据



    我想着首先我们需要用到的值一个是触发的时候上一个下拉框传过来的值,还有一个是表单提交后显示选中需要用到的值,那么我怎么区分是选中还是触发的事件呢,于是我又多了一个动作存储,    
    因此我的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|||"
        
    else
        
        if act = "changeCity" or act = "selectedCity" then
            sql = "select distinct AreaName2, Areaid2 from [Area] where Areaid1="& wxareaid &" and AreaName2 <> ''"
            str = "1|||"
            
        end if
        if act = "changeArea" or act = "selectedArea" then
            sql = "select distinct AreaName3, Areaid3 from [Area] where Areaid2="& wxareaid &" and AreaName3 <> ''"
            str = "2|||"
        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 & ""    
            rs.movenext
        wend
    end if


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

最终演示结果:

jq+ajax获取数据库里头的省市区联动三级搜索菜单_第3张图片


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

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



你可能感兴趣的:(web前端)