jQuery下拉框多选

所属分类:输入-选择框

 27952  44  查看评论 (38)
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。参数名字可以在代码里自己修改。

相关插件-选择框

jQuery仿淘宝商品选配

jQuery仿淘宝商品信息选配效果
  选择框
 2150  21

移动端城市搜索选择(原创)

原创,代码简单易修改。类仿大众点评选择城市的部分,只是部分不必要功能没有。有备注!json可修改!
  选择框
 2592  20

移动端城市选择

手机移动端城市选择
  选择框
 24660  164

jQuery移动端自定义select插件Ansel

Ansel自定义手机浏览器重置下拉选择带搜索
  选择框
 7891  28

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

    Try 0
    2018/6/21 16:16:38
    水锅锅 0
    2018/5/18 17:54:38
    编辑时怎么回显 回复
    O 0
    2018/3/27 17:05:28
    怎么取里面选中的值 大哥们 回复
    子陵 0
    2018/3/2 10:22:32
    梅花 0
    2018/2/4 15:45:27

    有用户用过吗?怎么养

    回复

    Rcon 0
    2018/1/29 11:08:54
    请问 如何设置默认一打开页面的时候   输入框的值为空呢?  看这个默认是显示了下拉框内容的
        ldywmd0
        2018/3/23 12:57:14
        把json数据中的selected后面的true改为false就不会默认显示内容了
    回复
    采蘑菇的丶糖小米 0
    2018/1/26 10:26:51

    能提供一下没压缩的版本么 ?

        ldywmd0
        2018/3/23 13:00:03
        用谷歌浏览器的F12 在Source下找到这个js文件,双击打开,在显示区域最下面有个{},点击这个{},就还原为未压缩的内容了,剩下的不用我说了吧
    回复
    Somnus 0
    2018/1/26 10:25:00

    后台怎么获取值啊

    回复
    falsehood 0
    2018/1/22 15:13:57
    ?腽酤?? 0
    2018/1/5 14:32:17

    回复能不能挣JQ币的?

    回复
取消回复