layui实现带搜索功能的select

时间:2024-04-14 18:19:04

页面代码:

<!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>
<!-- 新增检查6s表 -->
<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;">
            <!--表单class必须为layui-form-->
            <form class="layui-form" action="">
                <div class="form-group">
                    <label>人&nbsp;&nbsp;&nbsp;&nbsp;员:</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>时&nbsp;&nbsp;&nbsp;&nbsp;间:</label>
                    <input type="text" name="startTime" class="span2" readonly id="dpd1"  placeholder="请选择时间">
                </div>
                <div class="form-group">
                    <label>词条分类:</label>
                    <!--以下结构除了id其它都不能修改 lay-filter用于捕获时间-->
                    <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>积&nbsp;&nbsp;&nbsp;&nbsp;分:</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>
<!--加载完数据后再加载该js-->
<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>

展示效果:
layui实现带搜索功能的select

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