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>
posted @ 2025-04-22 17:06  黎明的太阳  Views(109)  Comments(0)    收藏  举报