如何通过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 控件选中指定的值的全部内容希望对大家有用。
        
以上关于如何通过js动态让select控件选中option指定的值的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。