下拉框插件 dropdown.js介绍

时间:2024-03-15 21:07:38

在项目中使用到了dropdown.js插件,把使用的方法以及注意点记录了下来。

插件描述:Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持keyvalue搜索,有token和两种模式。

地址:http://www.jq22.com/jquery-info14548

一、使用说明

1、html中使用<div>将select包含:

   <div class="selectSearch" ><select placeholder="请选择:"></select></div>

2、js:使用div的class或id调用dropdown方法:

    $('.selectSearch').dropdown({

                            data:数据源,

                            input:'<input type="text" maxLength="20" placeholder="请输入搜索">',

                            choice:function() {

                                     选择监听事件

                                 }

                            });

    数据源形式:[{"id";"","name":""}]

3、如果要动态添加下拉框数据,更新前需要判断,然后销毁再重建

    如果不销毁,每重新加载一次,页面就会动态添加一个下拉框

    例:

    if(dutyDropdown!=''){

            dutyDropdown.destroy();

         }

     dutyDropdown=$('.selectSearch').dropdown({

                data:arySelectData1,

                input:'<input type="text"maxLength="20" placeholder="请输入搜索">',

                choice:function(){  }

            }).data('dropdown');

   :需要建立下拉对象,方法后面添加.data(‘dropdown’),使其成为dropdown对象而不是dom对象,以便调用destroy()

4、如果要使下拉框可以多选,在select中添加multiple

    例:<select multiple placeholder="请选择:"></select>

   Dropdown的option中需要设置limitCount(选择上限)

5、获取选择的id:

 单选:$('.selectSearch.dropdown-selected').find('.del').attr('data-id');

 多选:var strClasses=$('.dropdown-selected');

           var arrids='';

           $.each(strClasses,function(j){

              var ss=$(strClasses[j]).find('.del').attr('data-id');

                         if(arrids!=''){

                            arrids+=","+ss;

                         }else{

                            arrids=ss;

                         }

                     });

  获取选择的内容:$('.selectSearch .dropdown-selected').text();

6、下拉框的x(清空)事件,在dropdown的定义事件后面添加:

   $('.dropdown-clear-all').on('click',function(){

                  arrids='';

              });

7、如果要为下拉框选择默认选中值,在数据源中为默认值添加selected

    arySelectData.push({

                     "id": arrID[0],

                       "name":  arrData[0],

                     "selected": true,

                  });

二、Options

下拉框插件 dropdown.js介绍

三、Methods

下拉框插件 dropdown.js介绍

下拉框插件 dropdown.js介绍