Beispiel für das dynamische Hinzufügen von Optionen zur Laui-Auswahl

Im Folgenden werde ich Ihnen ein Beispiel für das dynamische Hinzufügen von Optionen zu Laui Select vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

html

<form class="layui-form" action="">
 <p class="layui-form-item proSelect">
   <label class="layui-form-label">产品类别</label>
   <p class="layui-input-block editWidth">
    <select name="productList" lay-verify="required" id="zcySelect">
     <option value=""></option>
     <option value="0">轻松融</option>
     <option value="1">容易融</option>
     <option value="2">快乐融</option>
    </select>
   </p>
  </p>
  <a class="layui-btn layui-btn-small" id="" onclick="addProductClassify()">增加产品类别</a>
</form>
<!--弹窗内容-->
<p id="select_prod" class="layui-form" hidden="hidden">
 <p class="layui-input-inline">
  <input type="text" name="text" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
 </p>
</p>

js

//重新渲染表单
function renderForm(){
 layui.use('form', function(){
 var form = layui.form();//高版本建议把括号去掉，有的低版本，需要加()
 form.render();
 });
 }
//增加产品类别按钮点击事件
function addProductClassify(){
 layer.open({
  type:1,
  btn:['确定','取消'],
  content:$("#select_prod"),
  area:['270px','160px'],
  //当前层索引参数（index）、当前层的DOM对象（layero）
  yes:function(index,layero){
   //获取input输入的值
   var ivalue=$(layero).find("input").val();
   //获取要添加的option的索引
   var sIndex=$("#zcySelect")[0].options.length-1;
   if(ivalue==null||ivalue==''){
    layer.msg("请输入产品类别")
   }
   else{
    layer.msg("输入的产品类别是："+ivalue);
    //为select添加option
    $("#zcySelect").append("<option value="+sIndex+">"+ivalue+"</option>"); 
    renderForm();//表单重新渲染，要不然添加完显示不出来新的option
    layer.close(index);
   }
   $(layero).find("input").val(&#39;&#39;);
  }
 })
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie das externe Modul im Webpack

Verwenden von node.js zum Packen von Webpack

js-Erfahrung beim Teilen von JavaScript-Anti-Debugging-Kenntnissen

Das obige ist der detaillierte Inhalt vonBeispiel für das dynamische Hinzufügen von Optionen zur Laui-Auswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!