How to dynamically add options to layui select

This time I will show you how to dynamically add options in layui select. What are the precautions for dynamically adding options in layui select? . Here is a practical case. Let’s take a look.

html

 

   产品类别    

                轻松融      容易融      快乐融         

     增加产品类别

 

    

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>"+ivalue+"</option>"); 
    renderForm();//表单重新渲染，要不然添加完显示不出来新的option
    layer.close(index);
   }
   $(layero).find("input").val('');
  }
 })
}

I believe you read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to update the array with $set in vue.js

How to move the array in vue.js Position and update the view

The above is the detailed content of How to dynamically add options to layui select. For more information, please follow other related articles on the PHP Chinese website!