jQuery下拉框多选

所属分类:输入-选择框

jQuery下拉框多选 ie兼容9

数据格式

var data = [
            {
                "name": "常用",
                "city": [
                    {"cityName": "南京", "cityNumber": "001", "selected": true},
                    {"cityName": "上海", "cityNumber": "002"},
                    {"cityName": "苏州", "cityNumber": "003", "selected": true}
                ]
            },
            {
                "name": "全部",
                "city": [
                    {"cityName": "南京", "cityNumber": "001"},
                    {"cityName": "杭州", "cityNumber": "004"},
                    {"cityName": "无锡", "cityNumber": "005"},
                    {"cityName": "上海", "cityNumber": "002"},
                    {"cityName": "苏州", "cityNumber": "003"}
                ]
            }
        ];
        var data2 = [
            {"cityName": "南京", "cityNumber": "001", "selected": true},
            {"cityName": "杭州", "cityNumber": "004"},
            {"cityName": "无锡", "cityNumber": "005", "selected": true},
            {"cityName": "上海", "cityNumber": "002"},
            {"cityName": "苏州", "cityNumber": "003"}
        ]
        var data3 = [
            {
                "name": "江苏",
                "city": [
                    {"cityName": "南京", "cityNumber": "001", "selected": true},
                    {"cityName": "无锡", "cityNumber": "002", "selected": true},
                    {"cityName": "苏州", "cityNumber": "003", "selected": true}
                ]
            },
            {
                "name": "湖北",
                "city": [
                    {"cityName": "武汉", "cityNumber": "004", "selected": true},
                    {"cityName": "襄阳", "cityNumber": "005"},
                    {"cityName": "荆州", "cityNumber": "006", "selected": true}
                ]
            },
            {
                "name": "安徽",
                "city": [
                    {"cityName": "合肥", "cityNumber": "007", "selected": true},
                    {"cityName": "六安", "cityNumber": "008"},
                    {"cityName": "马鞍山", "cityNumber": "009", "selected": true}
                ]
            },
        ];

传入参数

var slidownSelectOptionse1 = {
    el: 'aaaaaa',//容器名称
    type: 'double',//插件类型
    width: '70px',//宽度
    height: '40px',//高度
    background: '#ffffff',//默认背景色
    color: '#000000',//默认字体颜色
    selectBackground: '#006666',//选中背景色
    selectColor: '#ffffff',//选中字体颜色
    show: 'false',//是否展开
    content: '...请选择...',//默认要显示的内容
    data: data//数据
}
var slidownSelectOptionse2 = {
            el: 'bbbbbb',//容器名称
            type: 'single',//插件类型
            width: '70px',//宽度
            height: '40px',//高度
            background: '#ffffff',//默认背景色
            color: '#000000',//默认字体颜色
            selectBackground: '#6699CC',//选中背景色
            selectColor: '#ffffff',//选中字体颜色
            show: 'true',//是否展开
            content: '...请选择...',//要显示的内容
            data: data2//数据
        }
        var slidownSelectOptionse3 = {
            el: 'cccccc',//容器名称
            type: 'more',//插件类型
            width: '70px',//宽度
            height: '40px',//高度
            background: '#ffffff',//默认背景色
            color: '#000000',//默认字体颜色
            selectBackground: '#66CC99',//选中背景色
            selectColor: '#ffffff',//选中字体颜色
            show: 'true',//是否展开
            content: '...请选择...',//要显示的内容
            data: data3//数据
        }
        var slidownSelectOptionse4 = {
            el: 'dddddd',//容器名称
            type: 'more',//插件类型
            width: '70px',//内容显示宽度
            height: '40px',//内容显示高度
            background: '#ffffff',//默认背景色
            color: '#000000',//默认字体颜色
            selectBackground: '#FF6633',//选中背景色
            selectColor: '#ffffff',//选中字体颜色
            show: 'false',//是否展开
            content: '...请选择...',//要显示的内容
            data: data3//数据
        }

调用方法

$(document).ready(function () {
   rltTools.slidownSelect(slidownSelectOptionse1)
   rltTools.slidownSelect(slidownSelectOptionse2)
   rltTools.slidownSelect(slidownSelectOptionse3)
   rltTools.slidownSelect(slidownSelectOptionse4)
})

其中type有三种:single,double,more,

single的数据格式对应data2,double的数据格式对应data,more的数据格式对应data3。参数名字可以在代码里自己修改。

相关插件-选择框

selectpick美化下拉框插件

selectpick是一款jquery开发的美化下拉框插件,具有响应快,美观,灵活,兼容性好的优点。欢迎下载下来使用。
  选择框
 50106  83

jQuery+css3下拉选择框

下拉选择,动画效果
  选择框
 16776  83

js城市选择器

纯js无任何依赖,调用方便兼容好,带首字母筛选非常棒的城市选择器
  选择框
 16938  50

jQuery省市区三级联动菜单

jQuery实现省市区三级联动菜单
  选择框
 3644  21

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

    ★☆想☆★ 0
    2017/9/15 15:58:35
    郭飞飞 0
    2017/9/12 17:24:16
    阿三 0
    2017/9/5 15:16:29
    石乐志 0
    2017/9/1 17:43:44

    充值你喵了个咪

    回复
    蒲公英的悠悠 0
    2017/8/29 18:06:44

    评论一个试试能不能得Q币

    回复
    xinerivg 0
    2017/8/21 10:13:49

    请问后台怎么获取选中的值?

    回复
    轻触指尖的冰凉 0
    2017/8/18 10:10:32

    插件挺好的,感谢大神贡献,下载下来研究一下,哈哈。

    回复
    为了依 0
    2017/8/9 13:50:00

    这个,作者能不能改成点击汉字就勾选框框,这样感觉只能点框框,手残党单击好难受

    回复
    酷爱丿超人 0
    2017/8/9 11:08:00

    评论能得JQ币吗?

        墨言0
        2017/8/14 9:08:12

        不知道

    回复
    一个人的生活 0
    2017/7/19 16:14:04

    这个插件还不错

    回复
取消回复