So fügen Sie der Laui-Auswahl dynamisch Optionen hinzu

Dieses Mal zeige ich Ihnen, wie Sie Optionen in Laui Select dynamisch hinzufügen. Was sind die Vorsichtsmaßnahmen für das dynamische Hinzufügen von Optionen in Laui Select?

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('');
  }
 })
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So aktualisieren Sie das Array mit $set in vue.js

So verschieben Sie das Array in vue.js Positionieren und aktualisieren Sie die Ansicht

Das obige ist der detaillierte Inhalt vonSo fügen Sie der Laui-Auswahl dynamisch Optionen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!