教你如何使用javascript動態(tài)插入select中的option
發(fā)布時間:2013/10/16
字體:大中小
摘要:教你如何使用javascript動態(tài)插入select中的option,js動態(tài)插入select中的option,很多時候我們需要動態(tài)向select中插入option,而且這種往往是需要使用javascript技術(shù),那么我們?nèi)绾问褂胘s進(jìn)行此操作呢?我為大家準(zhǔn)備了經(jīng)過測試可以使用的案例代碼。
這里我就打個比方,比如有2個select下拉框,第一個是一個數(shù)組,第二個也是一個數(shù)組,但是我又不想通過php動態(tài)輸出,因為這樣消耗資源比較嚴(yán)重,所以我們建議直接使用javascript輸出,也可以理解為是用js動態(tài)插入option,那么如何進(jìn)行此操作呢?看下面的實際案例代碼:
//處理good_bad_tips
var goodBadTips_array=new Array();
//0下標(biāo)為公共部分
goodBadTips_array[0]=new Array(2);
goodBadTips_array[0][0]=new Array('還湊合,給你一分','這是要火的節(jié)奏哇','此貼必火','不頂還等什么','這也太逆天了吧','不要在意這些細(xì)節(jié)','不錯,有點意思','學(xué)到新技能');
goodBadTips_array[0][1]=new Array('拿好你的負(fù)分,滾粗','發(fā)的不累 看的受罪','打個醬油就回去','好累,感覺不會再愛','萬萬沒想到','鹵煮情何以堪','去年買了個表','真心無力吐槽','簡直無法直視','你特么在逗我么','你就讓我看這');
//////////////////
goodBadTips_array[1]=new Array(2);
goodBadTips_array[1][0]=new Array('我的小伙伴都驚呆了','雷到爆,不贊不厚道','經(jīng)典,看過回味無窮','放開那個壕讓我來','敢不敢再糗一點','就是要前仰后合','二逼青年歡樂多','狂拽炫酷屌炸天','酷到?jīng)]朋友','繩命是入刺的井猜','繩命是入刺的回晃','對此萌物放棄抵抗','我竟然秒懂','燃燒吧小宇宙','誰允許你這么口耐','看一次噴屏一次');
goodBadTips_array[1][1]=new Array('我的小伙伴都嚇尿了','敢問笑點在何方','一直在模仿從未去超越','救命,我的狗眼','說好的節(jié)操呢','好喪失的擬人','誰來帶走這個神經(jīng)病','簡直喪心病狂','為何放棄治療','快來人,這有個挖祖墳的','不作死就不會死','太兇殘了','還我純真無暇的童年','Too young too simple','藥不能停','也就天朝能行');
goodBadTips_array[2]=new Array(2);
goodBadTips_array[2][0]=new Array('哈哈,正是我的菜','高端大氣上檔次','低調(diào)奢華有內(nèi)涵','奔放洋氣有深度','簡約時尚國際范','不可錯過的經(jīng)典');
goodBadTips_array[2][1]=new Array('悲傷逆流成河','我要45度角仰望','低端粗俗甩節(jié)操','土鱉僑情無下限');
goodBadTips_array[3]=new Array(2);
goodBadTips_array[3][0]=new Array('尼瑪,我真是個天才','我真是太TM機(jī)智了','智商帶動整體水平');
goodBadTips_array[3][1]=new Array('實在是弱爆了','智力低下會傳染','又在散發(fā)弱智光環(huán)','你特么在逗我嗎','你們這些愚蠢的地球人','聞到一股弱者的氣息','玩你的溜溜球');
goodBadTips_array[4]=new Array(2);
goodBadTips_array[4][0]=new Array('積攢正能量召喚小白龍','生活就是要有范兒','繩命是入刺的井猜','繩命是入刺的回晃','不錯,漲姿勢了');
goodBadTips_array[4][1]=new Array('看半天,終于還是沒看懂','顛覆我的世界觀','簡直喪心病狂','這個世界怎么了','咱能整點高端洋氣的不');
//defaultGoodTips+defaultBadTips為默認(rèn)
function insertGoodBadTips(n){
var good_for_n=goodBadTips_array[n][0].length;
var bad_for_n=goodBadTips_array[n][1].length;
var good_for_n_default=goodBadTips_array[0][0].length;
var bad_for_n_default=goodBadTips_array[0][1].length;
var good_str_all='<select id="good_tips" name="good_tips" style="height:22px;line-height:22px;"><option value="">好,下一個提示</option><option value="" disabled="disabled">---------------</option>';
var bad_str_all='<select id="bad_tips" name="bad_tips" style="height:22px;line-height:22px;"><option value="">不好,下一個提示</option><option value="" disabled="disabled">---------------</option>';
//for good
for(i=0;i<good_for_n;i++){
good_str_all+='<option'+(defaultGoodTips==goodBadTips_array[n][0][i]?' selected="selected"':'')+' value="'+goodBadTips_array[n][0][i]+'">'+goodBadTips_array[n][0][i]+'</option>';
}
good_str_all+='<option value="" disabled="disabled">---------------</option>';
for(i=0;i<good_for_n_default;i++){
good_str_all+='<option'+(defaultGoodTips==goodBadTips_array[n][0][i]?' selected="selected"':'')+' value="'+goodBadTips_array[0][0][i]+'">'+goodBadTips_array[0][0][i]+'</option>';
}
good_str_all+='<option value="" disabled="disabled">---------------</option></select>';
//for bad
for(i=0;i<bad_for_n;i++){
bad_str_all+='<option'+(defaultBadTips==goodBadTips_array[n][1][i]?' selected="selected"':'')+' value="'+goodBadTips_array[n][1][i]+'">'+goodBadTips_array[n][1][i]+'</option>';
}
bad_str_all+='<option value="" disabled="disabled">---------------</option>';
for(i=0;i<bad_for_n_default;i++){
bad_str_all+='<option'+(defaultBadTips==goodBadTips_array[0][1][i]?' selected="selected"':'')+' value="'+goodBadTips_array[0][1][i]+'">'+goodBadTips_array[0][1][i]+'</option>';
}
bad_str_all+='<option value="" disabled="disabled">---------------</option></select>';
return good_str_all+' '+bad_str_all;
}
通過上方的javascript代碼,我們可以繼續(xù)貼上html代碼,那么此時通過js動態(tài)向select中插入更多的option就可以完美解決,大家可以直接復(fù)制代碼進(jìn)行操作檢驗。
html代碼如下:
<div>
<script type="text/ecmascript" defer="defer">
var defaultGoodTips='還湊合,給你一分';var defaultBadTips='不作死就不會死';
document.write(insertGoodBadTips(2));
</script>
</div>