想要实现可输入,可选择,可以直接定义两个标签(input、select),对下拉框进行监听,将下拉框的值赋值给input
html代码

<div class="layui-inline">
						<label class="layui-form-label">&nbsp;&nbsp;&nbsp;<font
							color="red">*</font></label>
						<div class="layui-input-inline">
							<input type="text" name="name" id="agencyName" lay-verify="required" style="position:absolute;z-index:2;width:80%;"
								placeholder="请输入或选择机构名称" lay-reqtext="机构名称不能为空" class="layui-input" autocomplete="off"/>
							<select name="confidentialityAgencyName" id="confidentialityAgencyName" lay-filter="confidentialityAgencyName">
					        </select>	
						</div>
					</div>

position:absolute 在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号,select还可以点击。
autocomplete=“off” 为了不自动填充input框,免得压盖select选项

定义下拉框下拉数据,对下拉框进行监听
js代码

<script>
    layui.use(['form','layselect','formSelects'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        
        var formData=parent.formData;//拿到父页面数据
        
        //机构名称select下拉框
        var layselectconfidentialityAgencyName = layui.layselect;
        layselectconfidentialityAgencyName.render({
			  elem:"#confidentialityAgencyName",
			  url:'/core/confidentialityagency/selectname',//归属类型
			  select:(formData==null?undefined:formData.name),
			  format:function(data){
				  return{
					  code:data.id,
					  codeName:data.name
				  };
				  return data;
			  }
		  });

//监听机构select下拉框
      	form.on('select(confidentialityAgencyName)', function (data) {
      		/* if(data.value!=null&&data.value!=""&&data.value!=undefined){
      			selectAgencyName(data.value);
      		} */
      		selectAgencyName(data.value);
         });

});

 //监听机构名称下拉框,为input赋值
        function selectAgencyName(value){
        	$.ajax({
        		url:'/core/confidentialityagency/getconfidentialityagency',
        		method:'get',
        		data:{data:value},
        		async: false,
        		success: function (data) {
        			if(data.code==-1){
        				$('#agencyName').val("");//输入框为空
        			}
        			if(data.code==0){
        			$('#agencyName').val(data.data.name);//输入框赋值
        			}
        			//渲染select
        			form.render("select");
        		},
        	 error:function (data) {
        		 alert("selectreach"+data.msg);
             }
        	});
        }
</script>		  

后端代码

//机构下拉框/core/confidentialityagency/selectname
	@RequestMapping("/confidentialityagency/selectname")
	@ResponseBody
	public List<ConfidentialityAgency> getConfidentialityAgencyName() {
		return confidentialityAgencyService.getConfidentialityAgencyName();
	}
	
	//监听机构下拉框/core/confidentialityagency/getconfidentialityagency
	@GetMapping("/confidentialityagency/getconfidentialityagency")
	@ResponseBody
	public JsonResult getConfidentialityAgency(String data) {
		System.out.println("------------------"+data);
		return confidentialityAgencyService.getConfidentialityAgency(data);
	}

service层

@Override
	public List<ConfidentialityAgency> getConfidentialityAgencyName() {
		List<ConfidentialityAgency> list = confidentialityAgencyMapper.selectList(null);
		return list;
	}

	@Override
	public JsonResult getConfidentialityAgency(String data) {
		if (data == null || data.isEmpty())
			throw new IllegalArgumentException("数据不存在,请输入或者重新选择");
		ConfidentialityAgency cAgency = confidentialityAgencyMapper.selectById(data);
		return JsonResult.success("select ok", cAgency);
	}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐