合肥网站建设
文章阅读
网建技巧
优化技巧
网建问题
谨宸新闻
行业新闻

首页 > 合肥网站建设 > 正文

教你如何使用javascript动态插入select中的option

发布时间:2013/10/16字体:
摘要:教你如何使用javascript动态插入select中的option,js动态插入select中的option,很多时候我们需要动态向select中插入option,而且这种往往是需要使用javascript技术,那么我们如何使用js进行此操作呢?我为大家准备了经过测试可以使用的案例代码。
这里我就打个比方,比如有2个select下拉框,第一个是一个数组,第二个也是一个数组,但是我又不想通过php动态输出,因为这样消耗资源比较严重,所以我们建议直接使用javascript输出,也可以理解为是用js动态插入option,那么如何进行此操作呢?看下面的实际案例代码:

//处理good_bad_tips
var goodBadTips_array=new Array();
//0下标为公共部分
goodBadTips_array[0]=new Array(2);
goodBadTips_array[0][0]=new Array('还凑合,给你一分','这是要火的节奏哇','此贴必火','不顶还等什么','这也太逆天了吧','不要在意这些细节','不错,有点意思','学到新技能');
goodBadTips_array[0][1]=new Array('拿好你的负分,滚粗','发的不累 看的受罪','打个酱油就回去','好累,感觉不会再爱','万万没想到','卤煮情何以堪','去年买了个表','真心无力吐槽','简直无法直视','你特么在逗我么','你就让我看这');
//////////////////
goodBadTips_array[1]=new Array(2);
goodBadTips_array[1][0]=new Array('我的小伙伴都惊呆了','雷到爆,不赞不厚道','经典,看过回味无穷','放开那个壕让我来','敢不敢再糗一点','就是要前仰后合','二逼青年欢乐多','狂拽炫酷屌炸天','酷到没朋友','绳命是入刺的井猜','绳命是入刺的回晃','对此萌物放弃抵抗','我竟然秒懂','燃烧吧小宇宙','谁允许你这么口耐','看一次喷屏一次');
goodBadTips_array[1][1]=new Array('我的小伙伴都吓尿了','敢问笑点在何方','一直在模仿从未去超越','救命,我的狗眼','说好的节操呢','好丧失的拟人','谁来带走这个神经病','简直丧心病狂','为何放弃治疗','快来人,这有个挖祖坟的','不作死就不会死','太凶残了','还我纯真无暇的童年','Too young too simple','药不能停','也就天朝能行');
goodBadTips_array[2]=new Array(2);
goodBadTips_array[2][0]=new Array('哈哈,正是我的菜','高端大气上档次','低调奢华有内涵','奔放洋气有深度','简约时尚国际范','不可错过的经典');
goodBadTips_array[2][1]=new Array('悲伤逆流成河','我要45度角仰望','低端粗俗甩节操','土鳖侨情无下限');
goodBadTips_array[3]=new Array(2);
goodBadTips_array[3][0]=new Array('尼玛,我真是个天才','我真是太TM机智了','智商带动整体水平');
goodBadTips_array[3][1]=new Array('实在是弱爆了','智力低下会传染','又在散发弱智光环','你特么在逗我吗','你们这些愚蠢的地球人','闻到一股弱者的气息','玩你的溜溜球');
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代码,我们可以继续贴上html代码,那么此时通过js动态向select中插入更多的option就可以完美解决,大家可以直接复制代码进行操作检验。
html代码如下:
<div>
<script type="text/ecmascript" defer="defer">
        var defaultGoodTips='还凑合,给你一分';var defaultBadTips='不作死就不会死';
        document.write(insertGoodBadTips(2));
        </script>
</div>
本文标题:教你如何使用javascript动态插入select中的option
本文网址:http://www.055178.com/wangjianjiqiao/2861.html
原创网址:合肥网络公司<谨宸科技> 版权所有,转载请注明出处,并以链接形式链接网址:www.055178.com
文章标签:javascript插入动态
 上一篇:php如何压缩html代码并输出?
 下一篇:付费音乐,付费APP为何在中国无法施展