layui下拉框实现可输入、可选择
想要实现可输入,可选择,可以直接定义两个标签(input、select),对下拉框进行监听,将下拉框的值赋值给inputposition:absolute 在这里是让input和select在同一位置。z-index:2 是为了让input在select上面。width:80% 是为了不盖住select后面的小三角符号,select还可以点击。autocomplete=“off” 为了不自动填充i
·
想要实现可输入,可选择,可以直接定义两个标签(input、select),对下拉框进行监听,将下拉框的值赋值给input
html代码
<div class="layui-inline">
<label class="layui-form-label">机 构 名 称<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);
}
更多推荐
已为社区贡献8条内容
所有评论(0)