(共566篇)
全部分类

js改变select元素的值
[ JS基础 ] 

select 元素在没有设置属性 selected 的子元素时,默认使用第一个 option 的 value 值作为 select 的值

1
2
3
4
5
6
7
<select id="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

方法一:通过修改 select 元素的 value 值

1
2
3
window.onload = function () {
    document.querySelector('#test').value = '2';
};

方法二:通过为 option 元素添加 selected 属性

1
2
3
4
5
6
window.onload = function () {
    let ele = document.querySelectorAll('option')[2];
    ele.setAttribute('selected', true);
    //   或者
    ele.selected = true;
};

通过 setAttribute 和直接设置元素 selected 属性的区别在于:

这里设置 selected 属性为 true,实际上可以设置为任何结果为 true 的表达式,比如 1,‘selected’等等

设置 selected 属性的时候尤其要注意:

通过 JS 把 option 元素的 selected 设置为值为 false 的任何表达式,都是无效