select事件监听及选中

最新推荐文章于 2024-01-28 22:45:26 发布

原创最新推荐文章于 2024-01-28 22:45:26 发布 · 1.3w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#select #onchange #option #监听 #选中

本文介绍HTML中使用<select>元素创建下拉菜单的方法，并演示如何通过JavaScript监听下拉框的change事件来获取用户的选择项。同时，还展示了如何通过按钮点击事件设置下拉框的默认选项。

change事件

<select onchange="selectChange(this)>
    <option value="500">500米</option>
    <option value="1000">1000米</option>
    <option value="3000">3000米</option>
    <option value="5000">5000米</option>
</select>

<script>
//方法一
function selectChange(that) {
    console.log(that.value);
}

//方法二
let selectDom = document.querySelector('select'); //获取下拉框元素
selectDom.onchange = function() {
	let index = this.options.selectedIndex;
	let value = this.options[index].value;
    console.log(value);
}

//箭头函数的写法
//selectDom.onchange = () => {
//    console.log(selectDom.value);
//};
</script>

选中option

<select>
    <option value="500">500米</option>
    <option value="1000">1000米</option>
    <option value="3000">3000米</option>
    <option value="5000">5000米</option>
</select>
<button onclick="btnClick">选中3000米</button>

<script>

//方法一
function btnClick() {
	let selectDom = document.querySelector('select');
	selectDom.value = '3000';
}


//方法二
function btnClick() {
    let options = document.querySelector('select').options;

    //for循环
    for (let i = 0; i < options.length; i++) {
        if (options[i].value == '3000') {
            options[i].selected = true;
        }
    }
    
    // 或用
    // Array.from(options).forEach((option) => {
    //     if (option.value == '3000') {
    //         option.selected = true;
    //     }
    // });

    //或用
    // Array.prototype.forEach.call(options, (option) => {
    //     if (option.value == '3000') {
    //         option.selected = true;
    //     }
    // });
}
</script>