Que dois-je faire si la boîte de sélection de layui ne sort pas ?-Tutoriel Layui-php.cn

Que dois-je faire si la boîte de sélection de layui ne sort pas ?

藏色散人

Libérer： 2023-01-13 00:40:11

original

4401 Les gens l'ont consulté

La boîte de sélection de Layui ne peut pas apparaître car Layui masquera les éléments d'origine tels que la sélection, la case à cocher, la radio, etc. La solution est de charger le formulaire et d'exécuter une instance.

Que dois-je faire si la boîte de sélection de layui ne sort pas ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, layui version 1.0, ordinateur Dell G3.

Recommandé : "Tutoriel de base de JavaScript" "Tutoriel layUI"

Aujourd'hui, lors de l'écriture de la page frontale avec layui, j'ai utilisé avant d'append dans jqurey L'élément select

est initialement écrit comme suit :

<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>

Copier après la connexion

Contenu de la page :

Que dois-je faire si la boîte de sélection de layui ne sort pas ?

En parcourant l'API officielle de layui, j'ai trouvé que

Layui sait masquer les éléments originaux tels que la sélection, la case à cocher et la radio pour les embellir et les modifier. Mais cela dépend du composant du formulaire, vous devez donc charger le formulaire et exécuter une instance. Il est à noter que l'effet de survol de la navigation, l'onglet Tab, etc. sont les mêmes (ils doivent s'appuyer sur le module d'élément)

Ainsi, lorsque ces éléments sont nouvellement ajoutés, les éléments du formulaire de page doivent être re-rendu

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

Copier après la connexion

Ajoutez le code ci-dessus à la fin du script

Que dois-je faire si la boîte de sélection de layui ne sort pas ?