layui渲染下拉框,动态设置下拉框的内容,获取下拉框自定义属性

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

猜你喜欢

转载自blog.csdn.net/qq_21119773/article/details/107877159