layui动态追加select下的option并元素内添加事件

最新推荐文章于 2023-06-08 09:05:18 发布

CxToBj

最新推荐文章于 2023-06-08 09:05:18 发布

阅读量1.1k

点赞数 1

分类专栏：前端资料

本文链接：https://blog.csdn.net/lang09/article/details/103602296

版权

前端资料专栏收录该内容

14 篇文章 1 订阅

订阅专栏

//给一个元素添加点击事件并往areas中追加select的option
$("#addpeop").click(function(){

                      var peop=$("#areas");

                  var t=$(['<div class="layui-form-item" id="areas">',
                    '<label class="layui-form-label">可见地区</label>',
                    '<div class="layui-form layui-input-inline"  lay-filter="provinces" οnblur="citys('+i+');">',

                    '<select name="provinces'+i+'" id="provinces'+i+'"  lay-search="" class="state">',
                    '</select>',
                    '</div>',
                    '<div class="layui-form layui-input-inline"   lay-filter="citys" οnblur="districts('+i+');">',
                    ' <select name="citys'+i+'" id="citys'+i+'" lay-search="" class="state" >',
                    ' </select>',
                    '</div>',
                    ' <div class="layui-form layui-input-inline" lay-filter="districts">',
                    ' <select name="districts" id="districts'+i+'" class="state" lay-search="" >',
                    ' </select>',
                    ' </div>',
                      '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="del">删除</button>',
                      '</div>'].join(''));
                    t.find('#del').on('click', function(){
                        t.remove();
                    });
                    prosle(i);

                  i=i+1;

                   peop.after(t);
                     layui.form.render("select");
                })
                ///调用事件 window.citys这样调用
--------------------------------------
用append追加的元素也可以这绑定独立事件
// $(document).on('click','#provinceww',function(){
            //
            //     alert("我的id为text，change 你点击时触发"+i);
            // '<div class="layui-input-inline"  οnclick="prosle('+i+');" >',
            //
            // })
-----------------------------------------
                //根据省加载市区

            window.citys = function(i){

                $('#citys'+i).html("<option value='' selected>直接选择或搜索选择</option>");

                var parentid=$("#provinces"+i).val();

                form.render('select', 'province');
                $.ajax({
                    url: "/hospitalUnitController/selectProvince",
                    data: {"parentid":parentid},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (data) {
                        $.each(data.data, function (index, item) {
                            $('#citys'+i).append("<option value="+item.id+">"+item.areaname+"</option>");// 下拉菜单里添加元素
                        });
                        layui.form.render("select","citys");
                    }, error: function () {
                        layer.msg('失败');

                    },

                });
            }