これは、Ctripを模倣するカスタムデータドロップダウン選択であり、初心者にとってはより重要なパラメーターを説明しています。
/ * *ID：ID現在のプラグインの親要素 *データ：JSON選択データ（json形式） *bool：true/false dataデータを2つの値に分離する場合は、true *configを構成します：boolの内部オブジェクトを構成します（boolがtrueの場合）タグ*/ function yseLect（id、ydata、bool、config、fn）{var data = []; YSELECT_CLOSE = {}; var name_list = {a：[]、b：[]、c：[]、d：[]、e：[]、f：[]、g：[]、h：[]、i：[]、j：[]、k：[]、l：[]、m：[]、n：[] 、o：[]、p：[]、q：[]、r：[]、s：[]、t：[]、u：[]、v：[]、w：[]、x：[]、y：[]、z：[]、other：[]} //未定義のvar ydropdowns = document.getElementById（ID）を防止する新しい配列を作成します。関数pretreatment（）{//プロセスデータvar catalogdata = []; var branddata = []; var China = []; var foreign = []; for（var i in ydata）{if（ydata [i] [config.type] == null）catalogdata.push（ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.alias] else branddata.push（ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.type]）}; if（branddata！= ""）{for（var i = 0; i <branddata.length; i ++）{var str = branddata [i] .split（ ';'）if（str [3] == 0）china.push（str [0] + ';' + str [1] + ';' + str [2]）; else fortion.push（str [0] + ';' + str [1] + ';' + str [2]）; } if（bool）{data = china;データを返す; } else {data = fortion;データを返す; }} else {data = catalogdata;データを返す; //データを返す}}; function jsondata（data_name、ida）{// prectreatment var title = []によって返されたデータを処理します。 //初期文字var ahtml =を定義します{a：[]、b：[]、c：[]、d：[]、e：[]、f：[]、g：[]、h：[]、i：[]、j：[]、k：[]、l：[]、m：[]、n：[] 、o：[]、p：[]、q：[]、r：[]、s：[]、t：[]、u：[]、v：[]、w：[]、x：[]、y：[]、z：[]、other：[]}; //未定義のvaryselect_box = document.createelement（ "div"）を防ぐための新しい配列を作成します。 //新しい選択ボックス親要素を作成しますyselect_box.id = ida+"_ yselect_box"; var yselect_div = document.createelement（ "div"）; //文字返品値を備えたコンテナvar yselect_letter = document.createelement（ "p"）; // 26文字コンテナYSELECT_LETTER.ID = IDA+'_ YSELECT_LETTER' VAR STYLELINK = DOCUMENT.CREATEELEMENT（ "STYLE"）//スキンを作成します。 100％;位置：絶対;トップ：30px;左：0; z-index：9999; background：#ffff}＃ '+id+' _ yseLect_box P {background：＃469bde; padding：0 10px;}＃ '+id+' _ yselect_box p Spanse {font：16px/20pxmicot yahei; cursor：pointer; position：absolute; top：0; right：0; color：＃f00}＃ '+id+' _ yselect_box .hide_tag {border：1px solid＃469bde; padding;ディスプレイ：ディスプレイ：なし;最小高さ：100px; Max-Height：300px; Min-Width：300px; Max-Width：800px; Overflow：auto}＃ '+id+' _ yselect_box Pa {padding：5px; line-height：28px; coler：#fff} A {width：80px; display：block; text-decoration：none; padding：5px; line-height：12px; font-size：12px; float：left; color：＃444; anoverflow：hidden;テキストオーバーフロー：ellipsis;ホワイトスペース：nowrap;}＃ '+id+' _ yselect_box .hide_tag a：hover {background：＃469bde; color：#fff;}＃ '+' _ yselect_box .cur {borderbottom：2px solid＃fac51f} '; stylelink.innerhtml = '＃'+ida+'_ yselect_box {width：100％; min-width：500px; max-width：800px; position：aspolute：30px; left：0; z-index：9999; background：#fff; border：1px solid＃dddd; _ P {パディング：0 10px;}＃ '+ida+' _ yselect_box P span.close {font：16px/20x microsoft yahei; cursor：poinde：aspolute; top：0; right：0; color：＃666}＃ '+ida+' _ yselect_box;なし;最小高さ：50px; max-height：200px; overflow：auto}＃ '+ida+' _ yselect_box pa {padding：5px; line-height：28px; color：＃333; border-bottom：2px solid #bbb; font-weigh：bold} A {width：80px; display：block; text-decoration：none; padding：5px; line-height：12px; font-size：12px; float：left; color：＃444; anoverflow：hidden;テキストオーバーフロー：ellipsis;ホワイトスペース：nowrap;}＃ '+ida+' _ yselect_box .hide_tag a：hover {background：＃469bde; color：#fff;}＃ '+' _ yselect_box a.cur {borderbottom：border bottom：2px solid＃469bde; coler：＃469bde; for（var i = 0; i <data_name.length; i ++）{var str = data_name [i] .split（ ';'）title.push（str [2] .charat（0）.tolocaleuppercase（）//最初の文字を判断し、タイトルに割り当てる}; for（var j in title）{if（name_list [tit [j]]）name_list [tit [j]]。push（data_name [j]）; else name_list.other.push（data_name [j]）} // name_list for（name_list）{// process data、dide by letter、hided if（name_list [k] .length！= 0）{for（var i = 0; i <name_list [k]。 onclick = "' + fn +'（this）" name = "' + name_list [k] [i] .split（'; '）[0] +'"> ' + name_list [k] [i] .split（'; '）[1] +' </a> '; ahtml [k] += allhtml; }; YSELECT_LETTER.INNERHTML+= '<A HREF = "JavaScript：">'+k+'</a>'; YSELECT_DIV.INNERHTML+= '<Div>'+AHTML [k]+'</div>'; }; } var bool = true yselect_box.innerhtml = '<p id = "'+'_ yselect_letter'+'">'+yselect_letter.innerhtml+'<span> x </span> </p>'+yselect_div.innerhtml; ydropdowns.appendchild（yselect_box）; ydropdowns.appendchild（stylelink）; //ページに選択を挿入yselect_box.getElementsbytagname（ 'p'）[0] .getelementsBytagname（ 'span'）[0] .onclick = function yselect_close（）{ydropdowns.removechild（yselect_box）ydropdowns.removechild（stylelink）; bool = false} //クリックしてselect yselect_close.close = function yselect_close（obool）{if（obool）{ydropdowns.removechild（yselect_box）ydropdowns.removechild（stylelink）; bool = false return}; if（bool）{ydropdowns.removechild（yselect_box）ydropdowns.removechild（stylelink）; }} // select function return yselect_close} jsondata（pretreatment（）、id）navlist（id）function navlist（ids）{// tab tab processing var a = document.getelementbyid（ids+'_ yselect_letter'）。 var div = document.getElementById（ids+'_ yselect_box'）。getelementsbytagname（ 'div'）; div [0] .style.display = "block"; a [0] .classname = "cur"; for（var i = 0; i <a.length; i ++）{a [i] .index = i; a [i] .onclick = function（）{for（var j = 0; j <a.length; j ++）{div [j] .style.display = "none"; a [j] .classname = ""; }; div [this.index] .style.display = "block"; this.classname = "cur"}; }; }; }; };