多选下拉控件的使用(select-option)multiple-select
多选下拉控件的使用(select-option)multiple-select
writeademo 发表于8个月前
多选下拉控件的使用(select-option)multiple-select
  • 发表于 8个月前
  • 阅读 104
  • 收藏 0
  • 点赞 0
  • 评论 0

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

 

多选下拉控件的使用(select-option

1、第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select 。这个组件风格简单、文档全、功能强大。

Multiple-Select源码主页: https://github.com/wenzhixin/multiple-select

Multiple-Select文档以及Demo http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN

2、第二个组件:bootstrap-multiselect 。这个组件风格和第一个非常相似,文档也挺全面。

bootstrap-multiselect源码主页: https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文档以及Demo http://davidstutz.github.io/bootstrap-multiselect/

 

本篇中使用的是第一个控件来实现多选下拉框:

首先引入支持文件

multiple-select.jsmultiple-select.cssmultiple-select.png

 

支持过滤,启用,禁用,分组,功能还是比较全面

html片段:

example:

 

<head>

    <link href="multiple-select.css" rel="stylesheet"/>

</head>

<body>

    <select multiple="multiple">

        <option value="1">January</option>

        ...

        <option value="12">December</option>

    </select>

    <script src="multiple-select.js"></script>

    <script>

        $("select").multipleSelect({

            placeholder: "Here is the placeholder"

        });

    </script>

</body>

 

 

//js片段

//这里要取得选中的值,调用已有的函数

.multipleSelect('getSelects','value'); //value表示是属性类型

参数设置:

 

multipleSelect重要的方法:支持参数的初始话

本次使用过程中遇到的参数使用有

$("select").multipleSelect({

           placeholder:"请选择",//初始话文字设置

           selectAll:"true",//支持全选

           width:"200",//设置控件宽度

           selectAllText:"全选",//全选text

           container:"body",//重新选择空间显示的范围,这里遇到一个问题,就是下拉ms-drop显示不全,这里是区域问题,在这设置一下就ok

           allSelected:'已全选',//全选以后显示text

           countSelected:'#项已选中'//已选中的项数

          

       });

       $(".ms-drop").css({'width':'200'});//重新修改下拉框的宽度样式

 

 

这里只遇到一个问题就是下拉框显示不全,通过设置container属性已经解决。

 

 

其他问题可以读multiple-select.jsmultiple-select.css文件

遇到问题可以看问题列表https://github.com/wenzhixin/multiple-select/issues/255

在使用过程中可以补充

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