layui下拉选和搜索,搜索并回填选择值
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="https://unpkg.com/layui@2.9.23/dist/css/layui.css" rel="stylesheet">
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="https://unpkg.com/layui@2.9.23/dist/layui.js"></script>
</head>
<body>
<form action="pAction!list.action" id="MyForm" method="post">
<div class="layui-inline" style="width: 235px;">
<span>
<div class="layui-form layui-row" style="width:250px;margin-left:60px;">
<div class="">
<label style="margin-left:-60px;">名称:</label>
<select lay-search="fuzzy: true" id="Sel" name="p.name" lay-value="<s:property value="p.name"/>">
<option value="">请搜索</option>
<s:iterator value="sortList">
<option value="">请选择或搜索(默认不区分大小写测试数据)</option>
<option value="1">AAA</option>
<option value="2">aaa</option>
<option value="3">BBB</option>
<option value="4">bbb</option>
<option value="5">ABC</option>
<option value="6">abc</option>
<option value="<s:property value='key'/>"><s:property value="value"/></option>
</s:iterator>
</select>
</div>
</div>
</span>
</div>
<input type="hidden" id="Val" value="<s:property value="p.name"/>" />
<span class="">
<a href="javascript:doSubmit();">搜 索</a>
</span>
<!-- 搜索结果省略 -->
</form>
<script>
var va = $("#Val").val();
$("#Sel").val(va)
layui.use('form', function () {
var form = layui.form;
form.render('select');
});
</script>
</body>
</html>

浙公网安备 33010602011771号