在项目中使用到了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,
});