layui渲染下拉框，设置下拉框，设置验证

 <div class="layui-form-item">
                	 <label for="department_id" class="layui-form-label">
                        <span class="x-red">*</span>部门
                    </label>
                    <div class="layui-input-block">
                        <select name="department_id" id="department_id" lay-filter="department_id" required  lay-verify="required">
                        	<option value="">--</option>
                        	<c:forEach items="${department_li }" var="item">
                        	<option value="${item.did }" <c:if test="${s.department_id eq item.did}">selected </c:if>  >${item.dname }</option>
                        	</c:forEach>
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                	 <label for="professional" class="layui-form-label">
                        <span class="x-red">*</span>科室
                    </label>
                    <div class="layui-input-block">
                        <select name="chamber_id" id="chamber_id" lay-filter="chamber_id" required  lay-verify="required">
                       		<option value="">--</option>
                        </select>
                    </div> 
                </div>
<div class="layui-form-item">
	                <button class="layui-btn" type="submit" lay-submit lay-filter="formDemo">保存</button>
	                <button class="layui-btn" type="reset">重置</button>
	             </div>

关键代码：设置需要渲染的下拉框，用 lay-filter
id=“department_id” lay-filter=“department_id”

js代码如下：

layui.use(['form','layer'], function(){
        	  var form = layui.form;
        	  
        	  //监听提交
        	  form.on('submit(formDemo)', function(data){
        	    return true;
        	  });
        	  
        	  getChamber($('#department_id').val());  
          	form.on('select(department_id)', function(data){
              	var department_id=(data.value);
              	getChamber(department_id);
          	});

          	
          	function getChamber(department_id){
          		$("#chamber_id").html("");
          		 form.render('select');
          		if($.trim(department_id).length==0)return;
             		 $.ajax({
            	                type: 'POST',
            	               url : "${ctx}/chamber/selectByDid",
	  			    			data : {
	  			    				department_id : department_id
	  			    			},
            	                dataType:  'json',
            	                success: function(data){
  	           	                $.each(data, function(key, val) {
  	           								var option1 = $("<option>").val(val.cid).text(val.cname);
  	           								if("${s.chamber_id}"==val.cid)$(option1).attr('selected','selected');
  	           	                   			
  	           	                   			$("#chamber_id").append(option1);
  	           	                            form.render('select');
  	           	                 }); 
            	                }
            	       }); 
              } 
        	});

Layui 监听 select 获取自定义属性值

form.on('select(doctor_id)', function(data){
            	var f= $(data.elem).find("option:selected").attr("data-f");
            	$('#money').val(f); 
            	 
        	}); 

el-select下拉框自定义内容添加多选框以及图片等。

需求介绍

在下拉框中添加多选的按钮以及头像等等。

// An highlighted block
<template>
  <div class="selectCheckbox">
    <div @click="selectNone" class="select-header">
      识人
      <div class="select-box" v-show="selectboxIsshow">
        <el-select v-model="value" placeholder="请输入" multiple>
          <el-checkbox-group v-model="checkList" @change="checkboxClick">
            <el-option :label="item.label" :value="item.value" v-for="item in options" :key="item.value">
              <div style="display:flex;align-items: center;">
                <div @click.stop>
                  <el-checkbox :label="item.value" style="display:flex;align-items: center;"
                    ><img src="../assets/default-avatar.png" style="width:30px;height:30px;margin-right:20px"
                  /></el-checkbox>
                </div>
                <div>{{ item.label }}</div>
              </div>
            </el-option>
          </el-checkbox-group>
        </el-select>
      </div>
    </div>
    <div class="footer">content</div>
  </div>
</template>

  methods: {
    checkboxClick(item) {
      this.value = item
    },
    selectNone() {
      this.selectboxIsshow = !this.selectboxIsshow
    },
  },

这里使用双向绑定数据即可，页面会自动加载。
效果如下：

还有就是在点击多选框的时候实际上会触发el-select本身的点击事件，这里用了@click.stop阻止冒泡即可。

参考博主博客地址：https://blog.csdn.net/zwd862375698/article/details/116936144?spm=1001.2014.3001.5501