解決使用layui對select append元素無效或者未及時更新的問題

更新時間：2019年09月18日 09:27:11 作者：渣渣海

今天小編就為大家分享一篇解決使用layui對select append元素無效或者未及時更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

一、問題

本人在使用layui使用了select按鈕，點擊是js腳本會異步請求后臺接口獲取json數(shù)據(jù)，然后layui將json數(shù)據(jù)渲染到select上，然而獲取接口數(shù)據(jù)沒有問題，就是無法更新。

本人使用代碼如下：

<div class="main layui-clear">
  <div class="fly-panel" pad20>
    <h2 class="page-title">發(fā)布帖子</h2>
 
    <div class="layui-form layui-form-pane">
      <form method="post">
        <div class="layui-form-item">
          <label for="L_title" class="layui-form-label">標題</label>
          <div class="layui-input-block">
            <input type="text" id="L_title" name="title" required lay-verify="required" autocomplete="off"
                class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <div class="layui-input-block">
            <textarea id="L_content" name="content" placeholder="請輸入內容" class="layui-textarea fly-editor"
                 style="height: 260px;"></textarea>
          </div>
          <label for="L_content" class="layui-form-label" style="top: -2px;">描述</label>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">標簽選擇框</label>
            <div class="layui-input-block">
              <div class="layui-input-inline" onclick="">
                <script id="labels" type="text/html">
                  {{# layui.each(d.data, function(index,item){ }}
                    <option value="{{item.id}}">{{item.name}}</option>
                  {{# }); }}
                </script>
                <select name="modules" lay-search="" id="label_select" name="labelId">
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" lay-filter="*" lay-submit>立即發(fā)布</button>
        </div>
      </form>
    </div>
  </div>
</div>

js 腳本如下（該代碼是修改后的，添加了修改后的關鍵代碼，下面有提示）：

<script>
  layui.use(['form', 'laytpl', 'layedit'], function () {
    var form = layui.form,
      layedit = layui.layedit,
      layer = layui.layer,
      laytpl = layui.laytpl;
    //添加option
    $.get(quark_label_getall_api, function (data) {
      data = $.parseJSON(data);
      if (data.status == 200) {
        var tpl = $("#labels").html();
        laytpl(tpl).render(data, function (html) {
          $("#label_select").append(html);
          var form = layui.form
          form.render();
        });
      } else {
        layer.msg(data.error, {icon: 5});
      }
    });
    layedit.set({
      uploadImage: {
        url: quark_upload_api,
        type: 'post' //默認post
      }
    });
    var content = layedit.build('L_content'); //建立編輯器
    form.on('submit(*)', function (data) {
      var layeditval = layedit.getContent(content);
      if (layeditval == "" || layeditval == undefined || layeditval == null) {
        layer.msg("輸入的內容不能為空", {icon: 7});
        return false;
      }
      $.post(quark_posts_add_api, {
          title: data.field.title,
          content: layedit.getContent(content),
          labelId: data.field.labelId,
          token: getCookie()
        },
        function (data) {
          //data=$.parseJSON(data);
          if (data.status == 200) {
            layer.msg("發(fā)布成功", {
              icon: 1,
              time: 1000 //1秒關閉
            }, function () {
              location.href = "/pages/index";
            });
          } else if (data.status == 400) {
            layer.msg(data.error, {icon: 7});
          } else {
            layer.msg(data.error, {icon: 5});
          }
        }, "json");
      return false;
    });
  });
  //封裝查詢參數(shù)
  function getData(data) {
    var param = {};
    param.title = data.title;
    param.labelId = data.labelId;
    param.token = getCookie();
    return param;
  }
</script>

二、解決辦法：

Layui會對select、checkbox、radio等原始元素隱藏，從而進行美化修飾處理。但這需要依賴于form組件，所以必須加載 form，并且執(zhí)行一個實例。導航的Hover效果、Tab選項卡等同理（它們需依賴 element 模塊）

所以當新添加這些元素時需要對頁面表單元素重新渲染一下，需要模仿下面添加關鍵代碼

layui.use('form', function(){
 var form = layui.form; //只有執(zhí)行了這一步，部分表單元素才會自動修飾成功
 
 //……
 
 //但是，如果你的HTML是動態(tài)生成的，自動渲染就會失效
 //因此你需要在相應的地方，執(zhí)行下述方法來手動渲染，跟這類似的還有 element.init();
 form.render();
});

最后js異步獲取的數(shù)據(jù)可以在select上及時顯示了

效果圖：