带搜索框的jQuery下拉框美化插件searchableSelect

2024-11-30 约 383 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=62235137

带搜索框的jQuery下拉框美化插件searchableSelect

本文是实用性更新文章：

1.所需引用

这里只需要在head内引入如下的代码：

<link href="jquery.searchableSelect.css" rel="stylesheet" type="text/css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.searchableSelect.js"></script>

ps:jquery-1.11.1.min.js 不必必须是这个版本的

2.页面代码

<div class="form-group">
    <label class="col-md-2 control-label" for="select">
        处理人:
    </label>
    <div class="col-md-10" style="z-index: 9999; ">
        <select name=" " id="select-person" class="form-control"
        size="1">
            <option value="">
                请选择
            </option>
        </select>
    </div>
</div>

ps:这里的可以定义任何的一个常规的select

3.为select添加搜索框

$('#select-person').searchableSelect();

ps:这里调用的是searchableSelect()函数，有兴趣的可以看下源码

关于动态赋值的问题

function setPerson() {
    $.ajax({
        type: "post",
        contentType: "application/json; charset=utf-8",
        url: " ",
        success: function(data) {
            var tbody = " ";
            $.each(data,
            function(n, value) {
                var trs = "";
                trs += "<option value=" + value.user_id + ">" + value.user_name + "</option>";
                tbody += trs;
            });
            $("#select-person").append(tbody);
            //这里需要其赋值然后调用构造
            $("#select-person").val("${problem.pro_solve_userid}");
            //添加带搜索框的下拉框
            $("#select-person").searchableSelect();
        },
    });
}

ps:这里采用的是先为其赋值，然后去构造searchableSelect

目录

带搜索框的jQuery下拉框美化插件searchableSelect

带搜索框的jQuery下拉框美化插件searchableSelect