js动态设置select中option选中

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

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

js中如何判断value=2的option在select中确实存在这个下拉选项

假如有这样一个select

<select id="sel">

<option value=1>op1</option>

<option value=2>op2</option>

<option value=3>op3</option>

</select>

用jquery方法,返回1

1	`alert($("option[value=2]","#sel").length);`

假如有这样一个select

<select id="sel">

<option value=1>op1</option>

<option value=4>op4</option>

<option value=3>op3</option>

</select>

用上面的方法返回0

解决办法

手动通过原生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，会出问题的~

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

js动态设置select中option选中相关推荐

通过js动态设置select中option选中
2019独角兽企业重金招聘Python工程师标准>>> /** * 设置select控件选中 * @param selectId select的id值 * @param checkV ...
怎么用js动态设置select中的某个值为选中项
可以使用javascript和jQuery两种实现方式 1:使用javascript实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...
js动态设置文字大小
js动态设置文字大小 <script>function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.docu ...
微信小程序 setData动态设置数组中的数据
现在有一组死数据但是想在使用时动态修改其中的值在setData中不能直接设置,真想......,算了是这个和谐的社会救了那个工程师. 接下来,我们去征服她! 死数据: //地图上方控件contro ...
js动态删除表格中的某一行
js动态删除表格中的某一行 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
js动态设置元素的宽高
js动态设置元素的宽高实现代码: var html = document.getElementsByTagName('html')[0];var dl_second_nav=document.get ...
Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
html设置默认选中状态,html中select标签用法解析及如何设置select的默认选中状态...
当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将表单数据提交给服务器时包括 name 属性. 标签可选的属性属性值 ...

js动态设置select中option选中

解决办法

js动态设置select中option选中相关推荐

最新文章

热门文章