如何通过js动态让select控件选中option指定的值

文章内容如标题所说，这也是最近在做项目中遇到的需求问题，虽然很简单，但是我还是将它作为笔记整理下来下次遇到直接拿来用即可，也为后来需要帮助的小伙伴做个参考。具体要求：当用户对弹框里的内容进行编辑时，根据当初创建选中的 select 中 option 值，动态设置 select 中 option 选中，那么如何通过 js 动态设置 select 中 option 选中呢？这里需要先为大家补充一下 select options 集合的知识。推荐阅读《js 通过另外一个下拉菜单已选选项来修改当前下拉菜单的选项》获得更多关于 select 知识。

Select options 集合

定义和用法

option 集合可返回包含<select>元素中所有<option>的一个数组。

注意：数组中的每个元素对应一个<option>标签-由 0 起始。

语法

selectObject.options

属性

方法

浏览器支持

所有主要浏览器都支持 options 集合

实例

循环输出下拉列表中的所有选项:

HTML 代码：

<form>
你最喜欢的水果:
<select id="mySelect">
	<option>Apple</option>
	<option>Orange</option>
	<option>Pineapple</option>
	<option>Banana</option>
</select>
</form>
<button type="button" onclick="displayResult()">显示所有选项的文本</button>

JS 代码：

function displayResult(){
	var x=document.getElementById("mySelect");
	var txt="All options: ";
	var i;
	for (i=0;i
效果展示：

以上就是 options 的知识，记不清的私下做做功课，好了，接着看一下我们今天要实现的需求代码：
/** 
 * 设置 select 控件选中 
 * @param selectId select 的 id 值 
 * @param checkValue 选中 option 的值 
 * @author 码云笔记 
*/  
function select_option_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 选中该班组
select_option_checked('sel_group', group_id);
注：不要传'#sel_group'，习惯了 jquery，会出问题的。
以上就是今天关于如何动态通过 js 让 select 控件选中指定的值的全部内容希望对大家有用。