< 返回首页

标哥的笔记,是记录在日常学习技术和日常开发中那些年遇到过的坑!本站为新站,原"标哥的技术博客"中的文章会慢慢移到本站,欢迎收藏本站!
在使用本站过程中,有任何建议请联系标哥! 另,承接App开发、网站开发和微信小程序开发!欢迎联系我们


如何通过js动态设置select中option选中

 作者:标哥    发布日期:2017-02-20 19:07    阅读量:1362次
 

今天开发网站遇到一个小问题,如何动态通过js让select控件选中指定的值呢?在调试过程中,发现了amazeui这个ui组件的问题,使用它个组件的样式就无法通过selected=true设置为选中。

后来,去了官网查找了相关方法来实现,但是按照官网的代码并不能达到选中效果,最后无奈只能将样式去掉,使用HTML原有的样式,手动通过JS来实现这个功能。

标哥的笔记

解决办法

手动通过原生JS来实现:

/** 
 * 设置select控件选中 
 * @param selectId select的id值 
 * @param checkValue 选中option的值 
 * @author 标哥 
*/  
function set_select_checked(selectId, checkValue){  
    var select = document.getElementById(selectId);  

    for (var i = 0; i < select.options.length; i++){  
        if (select.options[i].value == checkValue){  
            select.options[i].selected = true;  
            break;  
        }  
    }  
}

然后通过这样来调用:

// 设置select选中该班组
set_select_checked('edit-group', group_id);

注意:不要传'#edit-group',习惯了jquery,会出问题的~

问题虽然简单,但是记录下来,下次直接复制过来即可!


承接:ThinkPHP项目开发、网站项目开发、微信项目开发、微信小程序项目开发、App开发,欢迎联系标哥QQ632840804