十一、select2实现下拉菜单
博客专区 > ssshen 的博客 > 博客详情
十一、select2实现下拉菜单
ssshen 发表于8个月前
十一、select2实现下拉菜单
  • 发表于 8个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="/static/css/select2.min.css">
    <script type="text/javascript" src="/static/js/select2.full.js"></script>
    <script type="text/javascript" src="/static/js/json2.js"></script>
</head>
<body>
    <div>
        <div class="mycontainer">
            <table width="50%">
                <tr>
                    <td width="50%">组:
                        <select id="group" name="group" style="width: 70%">
                        </select>
                    </td>
                    <td width="=50%">成员:
                        <select id="tester" name="tester" style="width: 70%">
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

javascript:

<script>
$('#group').select2({
    placeholder: 'select a group',
    ajax: {
        url: "/group",
        dataType: 'json',
        processResults: function(data) {
            return {
                results: $.map(data, function(item) {
                    return {
                        text: item.text,
                        id: item.id
                    }
                })
            };
        },
    }
});

$('#tester').select2({
    placeholder: 'select a tester'
}); 

// group被选择时,tester从后台获取数据并展示到前端
$('#group').on('select2:select', function(evt) {
    //清空select2的options
    $("#tester").empty();
    $('#tester').select2({
        placeholder: 'select a tester',
        ajax: {
            url: "/tester",
            type: 'get',
            dataType: 'json',
            data: {
                'group': $("#select2-group-container").html()
            },
            processResults: function(data) {
                return {
                    results: $.map(data, function(item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
        }
    });
});
</script>

效果如下:
下拉菜单效果图

参考文章:
http://select2.github.io/examples.html#events

标签: select2
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 32
码字总数 11112
×
ssshen
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: