layui实现带搜索功能的select

骑猪看日落 2021-05-10 11:33 1138阅读 0赞

**页面代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="applicable-device" content="pc,mobile">
        <meta http-equiv="Cache-Control" content="no-transform ">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
        <title>后台管理</title>
        <link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css">
        <script src="../../static/back/js/jquery.js"></script>
        <script src="../../static/back/js/bootstrap.js"></script>
    </head>
    <body >
    
    <div id="head" style="width:100%;"></div>
    
    <div id="leftNave" style="width:200px!important">
    </div>
    <script type="text/javascript">
        //引用头部的方法
        $("#head").load("../navigation/head.html");
        //引用左侧树的方法
        $("#leftNave").load("../left/left.html");
    </script>
    
    <div id="index" class="content"  style="display: block;text-align: center">
    
        
        <div class="inform" id="informAdd">
            <h1 class="renyuanyidong">添加积分记录</h1>
            <div style="margin-left: 20px;">
                
                <form class="layui-form" action="">
                    <div class="form-group">
                        <label>人    员:</label>
                        <div class="layui-input-inline">
                            <select id="renyuanList" name="modules" lay-verify="required" lay-search="">
                                <option value="">请选择人员</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>时    间:</label>
                        <input type="text" name="startTime" class="span2" readonly id="dpd1"  placeholder="请选择时间">
                    </div>
                    <div class="form-group">
                        <label>词条分类:</label>
                        
                        <div class="layui-input-inline">
                            <select id="ItemType" lay-filter="selectItem" name="modules" lay-verify="required" lay-search="">
                                <option value="">请选择词条分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>请选择项目:</label>
                        <div class="layui-input-inline">
                            <select id="ItemInfo" lay-filter="selectIntegralItemScore" name="modules" lay-verify="required" lay-search="">
                                <option value="" score="0">请选择词条项目</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>积    分:</label>
                        <input type="text" id="ItemIntegral" readonly value="0">
                    </div>
                    <div style="text-align:center;margin-top:10px;margin-bottom: 10px;">
                        <button type="button" onclick="addIntegralRecord()" class="btn btn-primary">添加</button>
                        <button type="reset" class="btn btn-warning" onclick="hideIntegralRecord()">取消</button>
                    </div>
                </form>
            </div>
    
        </div>
    </div>
    <script type="text/javascript">
        $("#renyuanList").html("");
        $("#ItemType").html("");
        $.ajax({
            url:url+"/renyuan/listAll",
            async:false,
            type:"POST",
            success:function(data){
                for(var i=0;i<data.length;i++){
                   $("#renyuanList").append("<option value='"+data[i].ID+"'>"+data[i].xingming+"</option>")
                }
            },
            error:function(){
                console.log("出错！");
            }
        });
        $.ajax({
            url:url+"/entryItem/listEntryItemsByType",
            async:false,
            type:"POST",
            success:function(data){
                $("#ItemType").append("<option value=''>请选择词条分类</option>")
                for(var i=0;i<data.length;i++){
                    $("#ItemType").append("<option value='"+data[i]+"'>"+data[i]+"</option>")
                }
            },
            error:function(){
                console.log("出错！");
            }
        });
    </script>
    
    <script src="../../static/layui/layui.all.js"></script>
    <script>
        //给作业项目框赋值
        var form = layui.form;
        form.on('select(selectItem)', function(choose){
            $("#ItemInfo").html("");
            $("#ItemInfo").append("<option value=''>请选择词条项目</option>");
            $("#ItemIntegral1").val("")
            var type = choose.value;
            $.ajax({
                url:url+"/entryItem/getEntryItemByType/"+type,
                type:"POST",
                success:function(data){
                    $("#ItemType").append("<option value='' score='0'>请选择词条项目</option>")
                    for(var i=0;i<data.length;i++){
                        $("#ItemInfo").append("<option score='"+data[i].score+"' value='"+data[i].id+"'>"+data[i].item+"</option>");
                    }
                    form.render();
                },
                error:function(){
                    console.log("出错！");
                }
            });
        });
    
        //给分数框赋值(这里是捕获上面定义的select改变事件，choose中的value为option中的value，所以option中value不可重复！！！)
        form.on('select(selectIntegralItemScore)', function(choose){
            var id = choose.value;
            var score=0;
            $("#ItemInfo option").each(function () {
                if ($(this).val() == id){
                    score = $(this).attr("score");
                }
            })
            $("#ItemIntegral").val(score);
        });
    
    </script>
    </body>
    </html>

**展示效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70]

注意：option中的value不可以重复！否则会出现选中后，点击其它地方，值又会改变的情况。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70]: /images/20210508/c93402633c874412a276e6a0dfa93f26.png