jQuery 多选下拉框插件

Posted 2023-05-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 多选下拉框插件相关的知识，希望对你有一定的参考价值。

类似于猎豹抢票软件上的“添加车次”这个使用到的插件，点击input框后弹出下拉框，下拉框中表格内容呈现可选信息，并提供可以多选，选择后的内容显示在input框的后面。求助:此插件的参考js源码，不剩感激。

插件没有，不过可以说说原理；设置一个<input type=“text" readonly=true><br/><select multiple style="display:none"></select>,当点击input的时候，查询数据库，将值赋值给select并让select显示出来，选择<option>的时候给input赋值就搞定了。参考技术A 我看下了这个类型的功能EasyUi 中的ComboGrid可以实现你可以去官方看下追问

EasyUI不是开源的，没有comboGrid源码。再请教下，ComboGrid中检索自动补全的功能原理是什么？是每次输入一个字符就去后台数据库模糊查询一下更新grid；还是直接全部检索出来在前台怎么做匹配处理的？

追答

这个可以设置的，如果你本地检索（第一次加载完后），也可以向服务器检索，一般的后采取分页的，所以向数据库请求的数据也不多
属性：mode
定义在文本改变的时候如何读取数据网格数据。设置为'remote'，数据表格将从远程服务器加载数据。当设置为'remote'模式的时候，用户输入将会发送到名为'q'的http请求参数，向服务器检索新的数据。
如果本地就设置为：local

本回答被提问者采纳

jquery实现下拉框多选

一、说明

　　本文是利用EasyUI实现下拉框多选功能，在ComboxTree其原有的基础上对样式进行了改进，样式表已上传demo，代码如下

二、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>利用EasyUI实现多选下拉框</title>
    <link rel="stylesheet" type="text/css" href="EasyUI/easyui.css" />
    <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(\'#ddlLine\').combotree({
                valueField: "id", //Value字段
                textField: "text", //Text字段
                multiple: true,
                data: [{ "id": 1, "text": "All", "children": [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3"}]}],
                //                url: "tree_data2.json", //数据源
                onCheck: function (node, checked) {
                    //让全选不显示
                    $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
                },
                onClick: function (node, checked) {
                    //让全选不显示
                    $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
                }
            });
        })
    </script>
</head>
<body>
    多选：<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;">
    </select>
</body>
</html>

三、效果

四、下载

　　DEMO

以上是关于jQuery 多选下拉框插件的主要内容，如果未能解决你的问题，请参考以下文章

带有 jquery-1.4.2.min.js 的搜索框插件的多选下拉菜单

用jquery实现可输入多选下拉组合框

如何使select2插件下拉框多选并获取选中的值

jquery.multiselect.js 实现下拉框多选怎么设置默认全部选中下拉框的值，

jquery实现下拉框多选