合肥網(wǎng)站建設(shè)
文章閱讀
網(wǎng)建技巧
優(yōu)化技巧
網(wǎng)建問(wèn)題
謹(jǐn)宸新聞
行業(yè)新聞

首頁(yè) > 合肥網(wǎng)站建設(shè) > 正文

教你如何使用javascript動(dòng)態(tài)插入select中的option

發(fā)布時(shí)間:2013/10/16字體:
摘要:教你如何使用javascript動(dòng)態(tài)插入select中的option,js動(dòng)態(tài)插入select中的option,很多時(shí)候我們需要?jiǎng)討B(tài)向select中插入option,而且這種往往是需要使用javascript技術(shù),那么我們?nèi)绾问褂胘s進(jìn)行此操作呢?我為大家準(zhǔn)備了經(jīng)過(guò)測(cè)試可以使用的案例代碼。
這里我就打個(gè)比方,比如有2個(gè)select下拉框,第一個(gè)是一個(gè)數(shù)組,第二個(gè)也是一個(gè)數(shù)組,但是我又不想通過(guò)php動(dòng)態(tài)輸出,因?yàn)檫@樣消耗資源比較嚴(yán)重,所以我們建議直接使用javascript輸出,也可以理解為是用js動(dòng)態(tài)插入option,那么如何進(jìn)行此操作呢?看下面的實(shí)際案例代碼:

//處理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é)','不錯(cuò),有點(diǎn)意思','學(xué)到新技能');
goodBadTips_array[0][1]=new Array('拿好你的負(fù)分,滾粗','發(fā)的不累 看的受罪','打個(gè)醬油就回去','好累,感覺(jué)不會(huì)再愛(ài)','萬(wàn)萬(wàn)沒(méi)想到','鹵煮情何以堪','去年買(mǎi)了個(gè)表','真心無(wú)力吐槽','簡(jiǎn)直無(wú)法直視','你特么在逗我么','你就讓我看這');
//////////////////
goodBadTips_array[1]=new Array(2);
goodBadTips_array[1][0]=new Array('我的小伙伴都驚呆了','雷到爆,不贊不厚道','經(jīng)典,看過(guò)回味無(wú)窮','放開(kāi)那個(gè)壕讓我來(lái)','敢不敢再糗一點(diǎn)','就是要前仰后合','二逼青年歡樂(lè)多','狂拽炫酷屌炸天','酷到?jīng)]朋友','繩命是入刺的井猜','繩命是入刺的回晃','對(duì)此萌物放棄抵抗','我竟然秒懂','燃燒吧小宇宙','誰(shuí)允許你這么口耐','看一次噴屏一次');
goodBadTips_array[1][1]=new Array('我的小伙伴都嚇尿了','敢問(wèn)笑點(diǎn)在何方','一直在模仿從未去超越','救命,我的狗眼','說(shuō)好的節(jié)操呢','好喪失的擬人','誰(shuí)來(lái)帶走這個(gè)神經(jīng)病','簡(jiǎn)直喪心病狂','為何放棄治療','快來(lái)人,這有個(gè)挖祖墳的','不作死就不會(huì)死','太兇殘了','還我純真無(wú)暇的童年','Too young too simple','藥不能停','也就天朝能行');
goodBadTips_array[2]=new Array(2);
goodBadTips_array[2][0]=new Array('哈哈,正是我的菜','高端大氣上檔次','低調(diào)奢華有內(nèi)涵','奔放洋氣有深度','簡(jiǎn)約時(shí)尚國(guó)際范','不可錯(cuò)過(guò)的經(jīng)典');
goodBadTips_array[2][1]=new Array('悲傷逆流成河','我要45度角仰望','低端粗俗甩節(jié)操','土鱉僑情無(wú)下限');
goodBadTips_array[3]=new Array(2);
goodBadTips_array[3][0]=new Array('尼瑪,我真是個(gè)天才','我真是太TM機(jī)智了','智商帶動(dòng)整體水平');
goodBadTips_array[3][1]=new Array('實(shí)在是弱爆了','智力低下會(huì)傳染','又在散發(fā)弱智光環(huán)','你特么在逗我嗎','你們這些愚蠢的地球人','聞到一股弱者的氣息','玩你的溜溜球');
goodBadTips_array[4]=new Array(2);
goodBadTips_array[4][0]=new Array('積攢正能量召喚小白龍','生活就是要有范兒','繩命是入刺的井猜','繩命是入刺的回晃','不錯(cuò),漲姿勢(shì)了');
goodBadTips_array[4][1]=new Array('看半天,終于還是沒(méi)看懂','顛覆我的世界觀','簡(jiǎn)直喪心病狂','這個(gè)世界怎么了','咱能整點(diǎn)高端洋氣的不');

//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="">好,下一個(gè)提示</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="">不好,下一個(gè)提示</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+'&nbsp;&nbsp;'+bad_str_all;
}

通過(guò)上方的javascript代碼,我們可以繼續(xù)貼上html代碼,那么此時(shí)通過(guò)js動(dòng)態(tài)向select中插入更多的option就可以完美解決,大家可以直接復(fù)制代碼進(jìn)行操作檢驗(yàn)。
html代碼如下:
<div>
<script type="text/ecmascript" defer="defer">
        var defaultGoodTips='還湊合,給你一分';var defaultBadTips='不作死就不會(huì)死';
        document.write(insertGoodBadTips(2));
        </script>
</div>
本文標(biāo)題:教你如何使用javascript動(dòng)態(tài)插入select中的option
本文網(wǎng)址:http://m.fn9c.com/wangjianjiqiao/2861.html
原創(chuàng)網(wǎng)址:合肥網(wǎng)絡(luò)公司<謹(jǐn)宸科技> 版權(quán)所有,轉(zhuǎn)載請(qǐng)注明出處,并以鏈接形式鏈接網(wǎng)址:m.fn9c.com
文章標(biāo)簽:javascript插入動(dòng)態(tài)
 上一篇:php如何壓縮html代碼并輸出?
 下一篇:付費(fèi)音樂(lè),付費(fèi)APP為何在中國(guó)無(wú)法施展