h5级联下拉、分类筛选

级联下拉列表框这种常见的需求,相信大家都经常遇到,下面两种写法都曾运用在项目,测试是没问题,但代码可能不是最好的,亲如果有更好的建议,请留言给我哦~一起探讨

注:数据若为 省市 数据,可利用省市联动的特殊性(如省市县的国标编码,按每2位直接切断判断),但这里不做讨论,亲们有兴趣可以查阅相关资料

第一种:强调复用性
1. 采用jQuery
利用class作为识别符,将级联下拉列表框选出来。
当选项发生变化的时候,调用Ajax,访问对应的数据文件(.txt)。然后,将数据文件解析后的数据加入到下一个下拉列表框,以此类推,所有的下拉列表框都可以做到级联。
2. 数据采用txt
对于相对固定的数据可以采用txt来作为数据源,每次发布的时候都无需重新启动服务器。但是对于数据源为动态源的情况,需要访问数据库。这时候只要修改对应的ajax访问URL即可。

* 结论:采用高度抽象以后,每增加一个下拉列表框只需要2行即可,1行用来声明下拉列表框,另一行用来定义下一个响应的下拉列表框ID。*

为了本文的可读性,这里给出关键的代码,需要全部代码的可以拉到最下面查看复制
js

$(document).ready(function(){

    $(".cascade_drop_down").change(
        function () {
            var name = $(this).attr("name") + "_next";
            var next = $("#" + name).val();
            if (next == null || next == '') {
                return;
            }

            $("#" + next).empty();

            $.ajax({
                type:'post',
                url: $(this).val() + '.txt',
                data:'name=' + name + '&val=' + $(this).val(),
                dataType:'text',
                success:function(msg){
                    ops = msg.split("\n");
                    for (i = 0; i < ops.length; i++) {
                        $("#" + next).append(ops[i]);
                    }
                },
                error:function(){
                    alert("failed.");
                }
            });
        }
    )

});

html

<div>
<input type="hidden" id="province_next" name="province_next" value="city">
<input type="hidden" id="city_next" name="city_next" value="">

<select id="province" name="province" class="cascade_drop_down">
    <option value="beijing">北京</option>
    <option value="tianjin">天津</option>
    <option value="shanghai">上海</option>
</select>

<select id="city" name="city" class="cascade_drop_down">
</select>
</div>

第二种: html5分类筛选、级联下拉

WechatIMG95.jpeg
1、数据采用json
对于相对固定的数据可以采用json来作为数据源,每次发布的时候都无需重新启动服务器。但是对于数据源为动态源的情况,需要访问数据库。这时候只要修改数据路径

2、每个事件独立,通过事件委托解决动态添加的子集也拥有对应的事件
代码对类名的依赖性比较强,理解起来相对简单,使用时可以根据需求更改完善

详细代码打包下载:https://coding.net/u/Jill/p/dankal-jill/git

查阅资料
https://home.cnblogs.com/u/stephen-wang/

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页