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/