Layui动态添加下拉框Select节点，删除下拉框Select动态节点，追加下拉框Select动态节点

刘梦凡呀

已于 2022-08-09 08:42:53 修改

阅读量3.6k

点赞数 1

分类专栏： Layui 文章标签： layui 前端 jquery javascript

于 2021-12-03 11:43:22 首次发布

本文链接：https://blog.csdn.net/qq_42782011/article/details/121695186

版权

Layui 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

这段代码展示了如何在JavaScript中处理动态添加和删除HTML select元素的选项。当用户选择某个值时，通过Ajax调用接口获取新的选项数据，然后清空现有select元素并追加新数据。功能包括：删除选框及其所有选项，追加新的select元素，并使用layui框架重新渲染表单。

摘要由CSDN通过智能技术生成

应用场景：选项联动。

添加动态节点：

 <div class="layui-inline">
                                    <label class="layui-form-label " style="width:120px">督学主题：</label>
                                    <div class="layui-input-inline" id="YearThreme">
                                        <select id="ThremeType" name="ThremeType" lay-filter="Thremetype">
                                            @foreach (var item in ViewBag.Threme)
                                            {
                                                <option value="@item.Id">@item.Name</option>
                                            }
                                        </select>
                                    </div>
                                </div>

其中，ViewBag.Threme是后端传过来的一个List集合形式的数据源。

删除节点（我删除的是当前select 的父节点，因为动态数据没法直接移除option选项）：

$(“#YearThreme”).empty();

追加select节点：

$("#YearThreme").append(MaxIndex(result));
   function res(index)
        {
            let res = `<select id="ThremeType" name="ThremeType" lay-filter="Thremetype">` + index + `</select>`;
            return res;
        };
        function MaxIndex(result) {
            let mes = '';
            for (let item in result) {
                mes += `<option value =${result[item].id}>${result[item].name}</option>`;
            }
            let constr = res(mes);
            console.log(constr);
            return constr;
        }

这部分功能的全部代码：

html部分：

<div class="layui-inline">
                                    <label class="layui-form-label " style="width:120px">督学主题：</label>
                                    <div class="layui-input-inline" id="YearThreme">
                                        <select id="ThremeType" name="ThremeType" lay-filter="Thremetype">
                                            @foreach (var item in ViewBag.Threme)
                                            {
                                                <option value="@item.Id">@item.Name</option>
                                            }
                                        </select>
                                    </div>
                                </div>

js部分：

      form.on('select(Year)', function (data) {
            Year = data.value;
            //YearThreme
              $.ajax({
               url: '@Url.Action("接口名称")',
               type: 'post',
               data: { Year:Year },
                  success: function (result)
                  {
                     //清空包括选项在内的文本框
                      $("#YearThreme").empty();
                      $("#YearThreme").append(MaxIndex(result));
                      renderForm();
               }
           });

            return false;
        })
     function res(index)
        {
            let res = `<select id="ThremeType" name="ThremeType" lay-filter="Thremetype">` + index + `</select>`;
            return res;
        };
        function MaxIndex(result) {
            let mes = '';
            for (let item in result) {
                mes += `<option value =${result[item].id}>${result[item].name}</option>`;
            }
            let constr = res(mes);
            console.log(constr);
            return constr;
        }

   //重新渲染表单
    function renderForm() {
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    }