The layui drop-down selection box select does not display

Bullet layer Dropdown Box has no Style_Not Clickable_No Effect_Solution for Rendering Failure

1. You must add class="layui-form" to the parent element where the form system is located

Set class="layui-form" in a container to identify a form element block. If you don't want to use form, you can replace it with any common element such as div; remember to define class="layui-form" in the outer container for the form module to work properly.

<form class="layui-form">
    <!--Here are the code entry boxes, selection boxes, check boxes, radio boxes, etc. inside the form-->
</form>

 

2. Call dependent load module: form

When you use a form, layui beautifies by hiding the original elements such as select, checkbox, radio, and so on.But this depends on the form component, so you must load the form and execute an instance;

Before you do that, you need to make sure that layui has been successfully introduced, that is, you need to be aware that the path to js is correct.

 

layui.use('form', function(){
    var form = layui.form; //Some form elements will not be automatically modified until this step is performed

    //......

    //But if your HTML Is dynamically generated, automatic rendering will fail
    //So you need to do the following at the appropriate place to render
    form.render();
});

 

3. Update Rendering

Sometimes some of your form elements may be dynamically inserted.Automation rendering of the form module will invalidate it.Although layui does not support two-way binding, that's okay; you just need to execute form.render(type, filter); the method will do.

The first parameter: type, which is the type of the form, is optional.By default, all types of forms are updated once.Types that can be refreshed locally are as follows:

Parameter (type) value describe
select Refresh select selection box rendering
checkbox Refresh checkbox rendering with switches
radio Refresh radio Radio radio Radio Box Rendering
 
form.render(); //Update All
form.render('select'); //Refresh select Selection Box Rendering
//......

The second parameter is filter, which is the value of lay-filter="" for the element where class="layui-form" is located.With this parameter, you can update the form locally.

<!-- HTML Example -->
<div class="layui-form" lay-filter="test1">
  ...
</div>
 
<div class="layui-form" lay-filter="test2">
  ...
</div>
<!-- JS Example -->
<script>
layui.use('form', function(){
    var form = layui.form,
    form.render(null, 'test1'); //To update lay-filter="test1" All form states in the container
    form.render('select', 'test2'); //To update lay-filter="test2" All in Container select state
    //......
});
</script>

 

4. The same principle in bullet layers requires updating rendering

<div id="layer-test" style="display: none;">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">check box</label>
      <div class="layui-input-block">
        <input type="checkbox" name="CSDN" lay-filter="like" title="Check box one" value="dongsir">
        <input type="checkbox" name="CSDN" lay-filter="like" title="Checkbox 2" value="Mr. Dong">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">Switch off</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch" value="Dong Hui">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">Switch on</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" checked lay-skin="switch" value="Mr. Dong's CSDN">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="*">Submit now</button>
      </div>
    </div>
  </form>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form,
      $ = layui.$;

    //layer Example

    layer.open({
        type: 1,
        title: ['Mr. Dong's CSDN Blog'],
        shade: 0.4,
        area:['900px', '650px'],
        content: $("#layer-test").html(),
        success: function(layero, index){
          form.render();
        }
    });
});
</script>

 

Tags: Javascript

Posted on Sat, 11 Jan 2020 22:44:34 -0500 by hrosas