07--jQuery插件大全-- select2的使用

最新推荐文章于 2024-06-28 16:12:55 发布

猪哥哥呀

最新推荐文章于 2024-06-28 16:12:55 发布

阅读量228

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_42133396/article/details/102622864

版权

jquery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

select2 下拉框搜索插件

- 官网[https://select2.org/](https://select2.org/)
            -github[https://github.com/select2/select2](https://github.com/select2/select2)
        **用法：
         * $("#mySelect").select2()

select具有搜索功能

也可以使用ajax获取数据渲染select2

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select2的使用</title>
    <link rel="stylesheet" href="../css/select2/css/select2.min.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/select2/js/select2.min.js"></script>
    <script src="../js/select2/js/i18n/zh-CN.js"></script>
</head>
<body>
<div>
    <h1>select2的使用</h1>
    <select id="mySelect01">
        <option value="北京"> 北京</option>
        <option value="天津"> 天津</option>
        <option value="上海"> 上海</option>
        <option value="重庆"> 重庆</option>
        <option value="河北"> 河北</option>
        <option value="山西"> 山西</option>
        <option value="辽宁"> 辽宁</option>
        <option value="吉林"> 吉林</option>
        <option value="黑龙江"> 黑龙江</option>
        <option value="江苏"> 江苏</option>
        <option value="浙江"> 浙江</option>
        <option value="安徽"> 安徽</option>
        <option value="福建"> 福建</option>
        <option value="江西"> 江西</option>
        <option value="山东"> 山东</option>
        <option value="河南"> 河南</option>
        <option value="湖北"> 湖北</option>
        <option value="湖南"> 湖南</option>
        <option value="广东"> 广东</option>
        <option value="海南"> 海南</option>
        <option value="四川"> 四川</option>
        <option value="贵州"> 贵州</option>
        <option value="云南"> 云南</option>
        <option value="陕西"> 陕西</option>
        <option value="甘肃"> 甘肃</option>
        <option value="青海"> 青海</option>
        <option value="内蒙古"> 内蒙古</option>
        <option value="广西"> 广西</option>
        <option value="西藏"> 西藏</option>
        <option value="宁夏"> 宁夏</option>
        <option value="新疆维吾尔自治区"> 新疆维吾尔自治区</option>
        <option value="香港"> 香港</option>
        <option value="澳门"> 澳门</option>
        <option value="台湾"> 台湾</option>
    </select>
    <select id="mySelect02"></select>
    <select id="mySelect03"></select>
</div>
<script>
    $(function () {
        $("#mySelect01").select2({
            language: "zh-CN",
            width: 200,
        });
        $("#mySelect02").select2({
            language: "zh-CN",
            width: 200,
            data: [{id: 12, text: '小明'}, {id: 12, text: '小李'}, {id: 12, text: '小王'}, {id: 12, text: '小强'}]
        });
        var datas;
        $.ajax({
            type: "GET",
            url: "http://www.kuwo.cn/api/www/bang/bang/musicList?bangId=16&pn=1&rn=30&reqId=7b2f8ac0-cdec-11e9-a585-09253a481f48",
            success: function (data) {
                datas = data.data.musicList;
                // console.log(datas);
                var dataArray = [];
                /* $(datas).each(function (i,val) {
                     dataArray.push({id:val.albumid,text:val.album});
                 })*/
                $.each(datas, function (i, val) {
                    dataArray.push({id: val.albumid, text: val.album});
                })
                console.log(dataArray);
                $("#mySelect03").select2({
                    language: "zh-CN",
                    width: 200,
                    data: dataArray
                })
            }
        });

    })
</script>
</body>
</html>

猪哥哥呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07--jQuery插件大全-- select2的使用

select2 下拉框搜索插件 - 官网[https://select2.org/](https://select2.org/)-github[https://github.com/select2/select2](https://github.com/select2/select2)**用法：* ...
复制链接

扫一扫

专栏目录