JS封裝的下拉框

2022-09-11 01:30:15 字數 3288 閱讀 2542

根據拼音首字母查詢課程

呼叫:

var test2 = new shangshu.course.select(1, 'test2',data);

test2.init();

引數:1. 1----排列的序號,當呼叫多個,顯示在最前不會被覆蓋

2. test2----附加在此id下的文字框下

3. data-----資料

html**:

<

script

type

="text/j**ascript"

src="./shangshu/jquery.js"

>

script

>

<

style

>

div,span,a,p

style

>

測試頁面

<

br/>

<

div

style

="left:200px;top:100px;"

>

<

div>

<

input

type

="text"

placeholder

="中文/拼音"

value

=""style

="width:260px;height:30px;outline:none;padding:0 1px;margin:0;"

id="test2"

/>

div>

div>

<

script

>

vardata

=,,],"c

":[,,,,,,,],"d

":,"f

":[,],"g

":[,]};

vartest2

=new

shangshu.course.select(1,

'test2

',data);

test2.init();

script

>

js**:

var shangshu ={};

shangshu.course ={};

shangshu.course.select = function

(selectnum, targetid,sourcedata)

);    

//目標物件單擊事件

this.inputobj.addeventlistener('mouseover', function

() );

//目標物件失去焦點事件

this.inputobj.addeventlistener('mouseout', function

() );

//目標物件輸入

this.inputobj.addeventlistener('input', function

() );

//對展示框繫結事件

this.selectdiv.addeventlistener('mouseover',function

());

//對展示框繫結事件

this.selectdiv.addeventlistener('mouseout',function

());  

//選擇區初始化

this.init_data(''); //

初始化資料

this.init_style(); //

初始化樣式

this.init_click(); //

初始化單擊事件

this.inputobj.after(this

.selectid);

this.selectid.after(this

.selectdiv);

this

.bindclick();

};this.div_hidden = function

();  

this.div_show = function

();  /**

* 初始化單擊事件

*/this.init_click = function

()  );

a.addeventlistener('click',function

());

a.addeventlistener('mouseout',function

());

});};/**

* 根據字母篩選內容

*/this.selectletter = function

(word)

else

}});

};/*

** 定義展示框的樣式

* @param targetobj

*/this.init_style = function

(targetobj);/*

** 滑鼠經過高亮

*/this.click_a_over = function

(targetobj);

this.click_a_out = function

(targetobj);/**

* 初始化資料

*/this.init_data = function

(word)

else

var i = 0;

$.each(val,

function

(k,v)

});};

});}

if (datanew !==undefined)

else

var divheight = this.height - 25;

var divwidth = this.width - 80;

//下面的顯示主體

var html = '';

$.each(datanew,

function

(key,val));

html += '

';html += '

';});

html += '

';if (word === '') title += '

';if (first !==undefined)

} else

//將html給到div

this.selectdiv.innerhtml = title+html;

};this.bindclick = function

());

});};

};

自己總結封裝了多級聯動下拉框js

支援多級下拉框 data 查詢出來的所有資料,經過處理縮排的多級資料。子集用固定child,pdata 選中的資料。字串用逗號隔開例 4,57,557 如果沒有就空字串 author 1017361009 qq.com 歡迎優化改進 function son eval pjsons if son f...

下拉框 列舉

列舉 public enum mchtprofitsplittype public string getvalue class 初始化中要放到下拉列表裡的 分賬方式列舉mchtprofitsplittype listorgprofitsplittypelist new arraylist mchtp...

下拉框元件

createselect.js text 建立民族陣列 var arraynation new array 漢族 蒙古族 彝族 侗族 哈薩克族 畲族 納西族 仫佬族 仡佬族 怒族 保安族 鄂倫春族 回族 壯族 瑤族 傣族 高山族 景頗族 羌族 錫伯族 烏孜別克族 裕固族 赫哲族 藏族 布依族 白族 ...