layui输入下拉框使用select二级联动

html 专栏收录该内容
4 篇文章 0 订阅
在这里插入代码片  引入layui 脚本
```<script src="<c:url value='/static/topayProfit/layui/layui.js'/>"></script>
<script src="<c:url value='/static/topayProfit/layui/layui.all.js'/>"></script>
	<link rel="stylesheet" href="<c:url value='/static/topayProfit/layui/css/layui.css' />" />	

第二布
<div class="layui-inline layui-form" style="width:96%">  //  lclass= ayui-form 必须加入这个class
	  <div class="layui-input-inline" style="width:94%">
		<select   id="branchBank"  name="branchBank" lay-verify="required" lay-search="" lay-filter="branchBank">
		  <option value="">直接选择或搜索选择</option>        
	   
		</select>
	  </div>
	</div>


第三部 引入 

<script>
//页*面加载时重新加载专用js脚本* 
//*页面加载时重新加载一下输入下拉框*  
	layui.use('form', function (){
		var form = layui.form; 
		
		form.render();
	 });  
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位,且不能出现空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
  });
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
  //表单赋值
  layui.$('#LAY-component-form-setval').on('click', function(){
    form.val('example', {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": "女"
      ,"desc": "我爱 layui"
    });
  });
  
  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  
});
</script>


第四部 
function getbranchBank(){
	var provVal = $("#bankProvinceName").val().trim();  //参数
	var city = $("#bankCityName").val().trim();  //参数
	var compAcctBank = $("#compAcctBank").val(); //参数
	
	var channelCode ="";
	$.post(window.Constants.ContextPath +"/common/info/bankCnapsInfo",
	{
		"provinceId": provVal,
		"cityCode":   city,
		"bankCode":   compAcctBank,
		"channelCode":channelCode
	},
	function(data){
		if(data.result=="SUCCESS"){
			var branchBankList = data.branchBankList;
			
			 $("#branchBank").html("");	
			$("#branchBank").append('<option value="">直接选择或搜索选择</option>');
   			for ( var branchBank in branchBankList) {
   				$("#branchBank").append(
   						"<option value='"+ branchBankList[branchBank].branchBankCode +"'>"
   								+ branchBankList[branchBank].bankName + "</option>"); 
   			}
   			
   		 	layui.use('form', function (){
   				var form = layui.form; 
   				//重新加载form表单
   				form.render();
   			 });  	
		}
		
	},'json'
	);	
	}

	完成 



  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值