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

最新推荐文章于 2025-07-12 12:12:56 发布

moker墨客

最新推荐文章于 2025-07-12 12:12:56 发布

阅读量7.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 插件

本文链接：https://blog.youkuaiyun.com/qq_30607881/article/details/62235137

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用jQuery插件searchableSelect来美化下拉框并添加搜索功能。首先在HTML头部引入jQuery库，然后在页面中定义一个常规的select元素。通过调用searchableSelect()函数，可以将select转化为带有搜索框的美化版。此外，还讨论了如何在插件中处理动态赋值的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是实用性更新文章：

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();
        },
    });
}