基於jquery的下拉多選外掛程式

2021-09-29 07:00:19 字數 1427 閱讀 4467

本人第一次寫部落格，記錄一下自己學習的東西，同時希望可以幫助的一同前進的你

由於開發中看到很多大神自己寫各種js的外掛程式很是羨慕，於是也萌生了自己寫js外掛程式的想法，下面是我花兩天寫的乙個下拉多選的js外掛程式，功能很簡單，寫的不是很好（大神看到多多指教），下面我簡單說下

一，外掛程式屬性的配置，options是對外暴露的引數，將一些需要提供給使用者的引數封裝為乙個json物件，defaults中可以設定一些預設值

;(function($),


onecho://做回顯  data格式[1,2,3,4,5]  select中的value


}
二，$.extend方法可以將使用者傳過來的引數和預設引數合併

var options=$.extend(defaults,options);
三，外掛程式的具體實現，開發中通常會將一些公共 的方法封裝到到一起，利於維護**解耦，**不難理解，自己研究一下，最下面會有**的鏈結位址

return this.each(function();


o[value]=html;


obj.push(o);


})return obj;}};


var box_html="




",		      content_html="",


submit_input="";		 


var multselect=);//select隱藏


_this.after(box_html);


jqobj=$("#"+uid);                    


this.changecss(jqobj);


/*獲取ul中的li的集合*/


var optionshtml="";


var arr=;//儲存select中的value值 


var _origin=originobj.getoptions();


for(var i=0;i<_origin.length;i++)


arr.push($key);


optionshtml+=''+$value+'';


}jqobj=multselect.setkiddiv_zindex(jqobj);


/*載入span input*/


//回顯


var data=options.onecho;


if(data&&$.isarray(data)){


var text="";


for(var i=0;i四，呼叫的時候需要引入jquery，以及依賴的css


自定義下拉多選


選項a選項b


選項c選項d


選項e選項f


選項g選項h


選項i選項g


選項h
以上就是下拉外掛程式的基本實現

Select下拉多選

首先，將下面的js 複製到乙個js檔案中 js檔名可以命名為selectmultip哦 並將其引入專案中即可 function reload function id,data,setdata var e document.getelementbyid id e.innerhtml htm rende...

layui下拉多選formSelects使用方法

引入formselects v4樣式 系統使用者 註冊外掛程式 layui.config extend 使用外掛程式，在layui.use中新增formselects layui.use element laydate table layer form laypage upload tree for...

vue element ui下拉多選驗證問題

最近做專案時，發現剛開啟彈框就出現了下拉多選的驗證，如下圖 經過網上搜尋，找到了兩種解決方案 第一種解決辦法 1 personneldescription 2 3 this.ruleformadd 第一種解決方案總結為兩點即 1.在校驗規則裡加type array 2.下拉多選框繫結的變數初始值設定...