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

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

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

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

//處理good_bad_tips
var goodBadTips_array=new Array();
//0下標為公共部分
goodBadTips_array[0]=new Array(2);
goodBadTips_array[0][0]=new Array('還湊合,給你一分','這是要火的節(jié)奏哇','此貼必火','不頂還等什么','這也太逆天了吧','不要在意這些細節(jié)','不錯,有點意思','學到新技能');
goodBadTips_array[0][1]=new Array('拿好你的負分,滾粗','發(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機智了','智商帶動整體水平');
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為默認
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+'&nbsp;&nbsp;'+bad_str_all;
}

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