lyhucSelect基于Jquery的Select數(shù)據(jù)聯(lián)動(dòng)插件
var areaInfo = new Array();
areaInfo[0] = new Array();
areaInfo[0][0]="1";
areaInfo[0][1]="Beijing";
areaInfo[0][2]="0";
areaInfo[0][3]="0";
areaInfo[1] = new Array();
areaInfo[1][0]="2";
areaInfo[1][1]="Shanghai";
areaInfo[1][2]="0";
areaInfo[1][3]="0";
areaInfo[2] = new Array();
areaInfo[2][0]="3";
areaInfo[2][1]="Jing'an";
areaInfo[2][2]="2";
areaInfo[2][3]="0";
areaInfo[3] = new Array();
areaInfo[3][0]="4";
areaInfo[3][1]="Changning";
areaInfo[3][2]="2";
areaInfo[3][3]="0";
areaInfo[4] = new Array();
areaInfo[4][0]="5";
areaInfo[4][1]="Luwan";
areaInfo[4][2]="2";
areaInfo[4][3]="0";
areaInfo[5] = new Array();
areaInfo[5][0]="6";
areaInfo[5][1]="Huangp";
areaInfo[5][2]="2";
areaInfo[5][3]="0";
areaInfo[6] = new Array();
areaInfo[6][0]="7";
areaInfo[6][1]="Pudong";
areaInfo[6][2]="2";
areaInfo[6][3]="0";
areaInfo[7] = new Array();
areaInfo[7][0]="8";
areaInfo[7][1]="Minhang";
areaInfo[7][2]="2";
areaInfo[7][3]="0";
areaInfo[8] = new Array();
areaInfo[8][0]="9";
areaInfo[8][1]="Qingpu";
areaInfo[8][2]="2";
areaInfo[8][3]="0";
areaInfo[9] = new Array();
areaInfo[9][0]="10";
areaInfo[9][1]="Hongkou";
areaInfo[9][2]="2";
areaInfo[9][3]="0";
areaInfo[10] = new Array();
areaInfo[10][0]="11";
areaInfo[10][1]="Zhabei";
areaInfo[10][2]="2";
areaInfo[10][3]="0";
areaInfo[11] = new Array();
areaInfo[11][0]="12";
areaInfo[11][1]="Putuo";
areaInfo[11][2]="2";
areaInfo[11][3]="0";
areaInfo[12] = new Array();
areaInfo[12][0]="13";
areaInfo[12][1]="Yangpu";
areaInfo[12][2]="2";
areaInfo[12][3]="0";
areaInfo[13] = new Array();
areaInfo[13][0]="14";
areaInfo[13][1]="Others";
areaInfo[13][2]="2";
areaInfo[13][3]="0";
jquery.lyhucSelect.js
(function($) {
$.fn.lyhucSelect = function(options) {
var element = this;
var elementid = "#" + element[0].id;
var defaults = {
dataSource:{},
subSelect:'#subcategory',
option:{text:'--Select--',value:''},
value:'0',
parentid:0
};
var options = $.extend(defaults, options);
var defaultoption = new Option();
var defaultsuboption = new Option();
(function init(){
defaultoption.text=options.option.text;
defaultoption.value=options.option.value;
$(elementid).append(defaultoption);
defaultsuboption.text=options.option.text;
defaultsuboption.value=options.option.value;
$(options.subSelect).append(defaultsuboption);
$(options.dataSource).each(function(i){
var id=options.dataSource[i][0];
var mc=options.dataSource[i][1];
if(options.parentid==options.dataSource[i][2])
{
var newoption = new Option();
newoption.value=id;
newoption.text=mc;
$(elementid).append(newoption);
}
});
})();
return this.each(function(){
$(this).bind("change",function(e){
var currentVal=$(this).val();
var tmpDepth=0;
$(options.subSelect).empty();
$(options.dataSource).each(function(i){
var id=options.dataSource[i][0];
var mc=options.dataSource[i][1];
if(currentVal==options.dataSource[i][2])
{
var newoption = new Option();
newoption.value=id;
newoption.text=mc;
$(options.subSelect).append(newoption);
tmpDepth++;
}
});
if(tmpDepth==0)
{
var parentoption = new Option();
parentoption.value=$(elementid).val();
parentoption.text=$(elementid).find('option:selected').text();
$(options.subSelect).append(parentoption);
}
});
});
};
})(jQuery);
調(diào)用:
$('#cityCategory').lyhucSelect({dataSource:areaInfo,subSelect:'#areCategory'});
效果:

- jQuery插件cxSelect多級(jí)聯(lián)動(dòng)下拉菜單實(shí)例解析
- jQuery使用Selectator插件實(shí)現(xiàn)多選下拉列表過(guò)濾框(附源碼下載)
- jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- Jquery插件之打造自定義的select標(biāo)簽
- JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗(yàn)證
- jquery select插件異步實(shí)時(shí)搜索實(shí)例代碼
相關(guān)文章
jQuery實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)游戲,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話(huà)框?qū)崿F(xiàn)代碼
jQuery UI Dialog是jQuery UI的彈出對(duì)話(huà)框組件,使用它可以創(chuàng)建各種美觀的彈出對(duì)話(huà)框;它可以設(shè)置對(duì)話(huà)框的標(biāo)題、內(nèi)容,并且使對(duì)話(huà)框可以拖動(dòng)、調(diào)整大小、及關(guān)閉;平常主要用來(lái)替代瀏覽囂自帶的alert、confirm、open等方法2012-04-04jQuery實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能,涉及jQuery事件響應(yīng)及窗口元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法,涉及jQuery結(jié)合HTML5實(shí)現(xiàn)瀑布流效果的動(dòng)態(tài)加載功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery實(shí)現(xiàn)當(dāng)按下回車(chē)鍵時(shí)綁定點(diǎn)擊事件
當(dāng)按下回車(chē)鍵時(shí),綁定按鈕點(diǎn)擊事件,本文為大家介紹下jQuery回車(chē)鍵綁定點(diǎn)擊事件的具體實(shí)現(xiàn)2014-01-01jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
這篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單,可實(shí)現(xiàn)頁(yè)面向下滑動(dòng)后導(dǎo)航欄橫向懸浮并固定在頂部的功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2016-09-09