js 二级联动

时间:2019-09-25
本文章向大家介绍js 二级联动,主要包括js 二级联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
          <select name="provid" id="A1" lay-filter="provid">
                <option value="">请选择省</option>
                <option value="110000" selected="selected">北京</option>
                <option value="120000">天津</option>
                <option value="130000">河北省</option>
                <option value="140000">山西省</option>
                <option value="700000">港澳台地区</option>
            </select>
layui  自动生成
 
绑定事件
layui.use('form', function () {
            var form = layui.form;
            form.on('select(A1)', function (data) {  //绑定改变事件
                alert("0000"); //绑定不到
            })
            form.on('select(provid)', function (data) {  //绑定改变事件
                alert("111"); //----ok
            })
   });




    //二级联动返回的json
    public class Two_level_linkage
    {
        public Two_leavel_head head { get; set; }
        public List<Two_leavel_head> items { get; set; }
    }
    public class Two_leavel_head
    {
        public int id { get; set; }
        public string name { get; set; }
}
List 控制器
              var busitype_list = busiTypesdb.GetList();
            var hFeven_list = hFEventInfodb.GetList();
            List<Two_level_linkage> list = new List<Two_level_linkage>();
            for (int i = 0; i < busitype_list.Count; i++)
            {
                Two_level_linkage mode = new Two_level_linkage();
                mode.head = new Two_leavel_head();
                mode.items = new List<Two_leavel_head>();
                mode.head.id = busitype_list[i].BusiTypesID;
                mode.head.name = busitype_list[i].BusiTypesName;
                for (int j = 0; j < hFeven_list.Count; j++)
                {
                    if (busitype_list[i].BusiTypesID == hFeven_list[j].BusiTypeID)
                    {
                        Two_leavel_head modeL = new Two_leavel_head();
                        modeL.id = hFeven_list[j].HFEventId;
                        modeL.name = hFeven_list[j].HFEventName;
                        mode.items.Add(modeL);
                    }
                }
                list.Add(mode);
            }
            ViewBag.Content = JsonHelper.GetJson(list);  //[] //[{"city":null,"name":"123"}]



Js 解析
layui.use('form', function () {
            var form = layui.form;
            form.on('select(provid_A1)', function (data) {  //绑定改变事件
                var B1 = document.getElementById("B1");
                B1.innerHTML = "";
                var C1 = document.getElementById("list_busi").value;
                var ob = JSON.parse(C1);
                var t = this.getAttribute("lay-value");
                bind_data(t);
            })



        });
        //-----------bgin----------------------
        var obj_data;
        //初始化数据 联动
        function bind_data(index) {
            if (!index) {
                //获得数据
                var C1 = document.getElementById("list_busi").value;
                var ob = JSON.parse(C1);
                obj_data = ob;

                var i = 0; j = 0;
                var sb = new StringBuilder();
                for (; i < ob.length; i++) {
                    if (i == 0) //默认选择第一个
                    {
                        sb.appendFormat('<option value="{0}" selected="selected">{1}</option>', ob[i].head.id, ob[i].head.name);
                        inset_html("B1", get_child(ob[i].head.id, obj_data));
                        continue;
                    }
                    sb.appendFormat('<option value="{0}">{1}</option>', ob[i].head.id, ob[i].head.name);
                }
                inset_html("A1", sb.toString());
            } else {
                inset_html("B1", get_child(index, obj_data));
            }
            //插入数据
            function inset_html(id, content) {
                if (!content) {
                    content = '<option value="">无数据</option>';
                };
                document.getElementById(id) && (document.getElementById(id).innerHTML = content);
            }
            //获得子项内容
            function get_child(id, ob) {
                var i = 0; j = 0;
                var sb = new StringBuilder();
                for (; i < ob.length; i++) {
                    if (id == ob[i].head.id) {
                        for (; j < ob[i].items.length; j++) {
                            if (j == 0) {
                                sb.appendFormat('<option value="{0}" selected="selected">{1}</option>', ob[i].items[j].id, ob[i].items[j].name);
                                continue;
                            }
                            sb.appendFormat('<option value="{0}" >{1}</option>', ob[i].items[j].id, ob[i].items[j].name);
                        }
                        break;
                    }
                }
                return sb.toString();
            }

            var form = layui.form;
            form.render();
        }
     //--------end---------------------

原文地址:https://www.cnblogs.com/enych/p/11585106.html