What should I do if the select box of layui does not come out?

The reason why the select box of layui does not appear is because Layui will hide the original elements such as select, checkbox, and radio. The solution is to load the form and execute an instance.

The operating environment of this tutorial: Windows 7 system, layui version 1.0, Dell G3 computer.

Recommended: "javascript basic tutorial""layUI tutorial"

When I used layui to write the front-end page today, I used before append in jqurey Select element

is written at the beginning:

<div class="layui-form-item">
    <label class="layui-form-label">执行人员</label>
    <div  style="width: 150px;display: inline-block;" >
      <select name="city">
        <option value="">选择部门</option>
        <option value="0">北京</option>
      </select>
       </div>---
        <div style="width: 150px;display: inline-block;">
      <select name="city" >
        <option value="">选择人员</option>
        <option value="0">张三</option>
      </select>
 </div>
 
 <button type="button" class="layui-btn" id="addpeop">
  <i class="layui-icon">&#xe608;</i>
</button>
</div>
<script>
$(function(){
$("#addpeop").click(function(){
var peop=$("#addpeod");
var t=$([&#39;<label class="layui-form-label"></label>&#39;,
       &#39;<div  style="width: 150px;display: inline-block;" >&#39;,
               &#39;<select name="city">&#39;,
           &#39;<option value="">选择部门</option>&#39;,
          &#39;<option value="0">北京</option>&#39;,
         &#39;</select>&#39;,
          &#39;</div>---&#39;,
           &#39;<div style="width: 150px;display: inline-block;">&#39;,
        &#39; <select name="city" >&#39;,
          &#39; <option value="">选择人员</option>&#39;,
               &#39;<option value="0">张三</option>&#39;,
               &#39;</select>&#39;,
       &#39;</div>&#39;,
       &#39;<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="del">删除</button>&#39;].join(&#39;&#39;));
t.find(&#39;#del&#39;).on(&#39;click&#39;, function(){
t1.remove();
        });
peop.append(t);
   
})
})
</script>

Page content:

## After reading the official API of layui, I found that

Layui knows Hide original elements such as select, checkbox, and radio to beautify and modify them. But this depends on the form component, so you must load the form and execute an instance. It is worth noting that the Hover effect of navigation, Tab tab, etc. are the same (they need to rely on the element module)

So when these elements are newly added, the page form elements need to be re-rendered

layui.use('form', function(){
  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
  
  //……
  
  //但是，如果你的HTML是动态生成的，自动渲染就会失效
  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
  form.render();
});

Add the above code at the end of the script

The problem is solved

Note: The layui 2.x version used may be different from other versions

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of What should I do if the select box of layui does not come out?. For more information, please follow other related articles on the PHP Chinese website!