#Layui JavaScript# 动态获取下拉框+动态绑定下拉框_layui table 获取列中下拉框的值-优快云博客

本文介绍了一种在网页中动态绑定和显示下拉框数据的方法，通过监听下拉框的选择变化，使用jQuery和AJAX获取后端数据，并根据不同业务类型（如商品或文章）动态填充二级下拉框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <div class="layui-inline">
          <label class="layui-form-label">插入业务</label>
          <div class="layui-input-inline">
              <select name="ExtendType" id="ExtendType" lay-filter="ExtendType">
                  <option value="">请选择业务</option>
                  <option value="名片">名片</option>
                  <option value="商品">商品</option>
                  <option value="文章">文章</option>
              </select>
          </div>
          <div class="layui-input-inline" style="display:none" id="tempdiv">
              <select name="tempchild" id="tempchild"></select>
          </div>
      </div>

效果图：

 //下拉框自主选择
            form.on('select(ExtendType)', function (data) {
                var selectval1 = data.value;
                if (selectval1 == "名片" || selectval1 == undefined || selectval1 == "") {
                    $("#tempdiv").attr("style", "display:none");
                } else {
                    $("#tempdiv").attr("style", "display:block");
                }
                var url = '/TTVideo/Video/JSBusiness';
                $.get(url, function (data) {
                    $("#tempchild").empty();
                    $("#tempchild").append(new Option("请选择", ""));
                    var objdata = data.data;
                    if (selectval1 == "商品") {
                        $.each(objdata[selectval1], function (index, item) {
                            $("#tempchild").append('<option value="' + item.ID + '">' + item.CommodityName + '</option>');
                        });
                    }
                    else if (selectval1 == "文章") {
                        $.each(objdata[selectval1], function (index, item) {
                            $("#tempchild").append('<option value="' + item.ID + '">' + item.Title + '</option>');
                        });
                    }
                    layui.form.render("select");
                });
            });

动态绑定下拉框数据并显示

 //二级下拉框绑定（加载页面前绑定数据）
            $(document).ready(function () {
                var selectval1 = document.getElementById('ExtendType').value;
                if (selectval1 == "名片" || selectval1 == undefined || selectval1 == "") {
                    $("#tempdiv").attr("style", "display:none");
                } else {
                    $("#tempdiv").attr("style", "display:block");
                }
                var url = '/TTVideo/Video/JSBusiness';
                $.get(url, function (data) {
                    var objdata = data.data;
                    var v = "";
                    var cid = "@Model.ExtendName";
                    if (selectval1 == "商品") {
                        $.each(objdata[selectval1], function (index, item) {
                            var itemname = item.CommodityName;
                            if (cid == item.CommodityName) {
                                $("#tempchild").append('<option value="' + item.ID + '" selected="selected" >' + item.CommodityName + '</option>');
                            } else {
                                $("#tempchild").append('<option value="' + item.ID + '">' + item.CommodityName + '</option>');
                            }
                        });
                    }
                    else if (selectval1 == "文章") {
                        console.log(objdata[selectval1]);
                        $.each(objdata[selectval1], function (index, item) {
                            if (cid == item.Title) {
                                $("#tempchild").append('<option value="' + item.ID + '" selected="selected" >' + item.Title + '</option>');
                            } else {
                                $("#tempchild").append('<option value="' + item.ID + '"  >' + item.Title + '</option>');
                            }
                        });
                    }
                    layui.form.render("select");
                });
            });

效果图（一打开网页就显示数据）