[select2] 自定义下拉内容格式

 

复制代码
<html>
<header>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</header>

<body>
    <select id="select2Dropdown"></select>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>

        let data = [];

        for (var i = 0; i < 10; i++) {
            data.push({
                id: i,
                text: `text${i}`
            });
        }

        $("#select2Dropdown").select2(
            {
                data: data,
                width: '100%',
                escapeMarkup: function (markup) {
                    return markup;
                },
                templateResult: dataFormat
            },
        );

        function dataFormat(data) {
            if (data.loading) {
                return data.text;
            }

            return `<div>${data.id}</div><div>${data.text}</div>`
        }

    </script>
</body>

</html>
复制代码

注：如果没有添加escapeMarkup，templateResult将返回文本内容，不会按html元素显示数据

 

posted @   WikiChen  阅读(176)  评论(0)  编辑  收藏  举报
相关博文：
·  [select2] 分组下拉选择
·  [select2] Ajax分页获取数据
·  一个特殊下拉选择
·  下拉框改变绑定文本框的内容
·  js文件 (下拉框,后端返回查找对应内容)
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae