select事件监听及选中

喜欢ヅ旅行 2022-10-06 00:41 251阅读 0赞

## 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui自动触发选中指定的radio的事件。select选中某个内容

![20200310111548682.png][] ![20200310111601243.png][] 只有点击定时公布答案为是的时候才显示下面的答案公布时间。在编

青旅半醒/ 2023年07月13日 03:46/ 0 赞/ 22 阅读

相关 Layui 下拉框Select onchange事件监听

<html> .... <div class="layui-input-block">

Myth丶恋晨/ 2022年12月19日 06:16/ 0 赞/ 248 阅读

相关 select事件监听及选中

change事件 <select onchange="selectChange(this)> <option value="500">500米</option>

喜欢ヅ旅行/ 2022年10月06日 00:41/ 0 赞/ 252 阅读

相关 select 　监听

/ reads input from pipes p1, p2 using select() for multiplexing

淩亂°似流年/ 2022年08月11日 13:58/ 0 赞/ 198 阅读

相关 JQ-select触发选中option之change事件

使用JQ触发select的选中事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8

怼烎@/ 2022年04月17日 01:47/ 0 赞/ 903 阅读

相关事件监听机制（一）Java事件监听

事件监听机制（一）Java事件监听事件监听实现流程 1. 事件对象：继承自`java.util.EventObject`对象，由开发者自行定义实现

小灰灰/ 2022年03月17日 15:25/ 0 赞/ 525 阅读

相关事件监听机制（二）Spring事件监听

事件监听机制（二）Spring事件监听事件监听实现流程 1. 事件对象：继承自`java.util.EventObject`对象，由开发者自行定义

小鱼儿/ 2022年03月15日 05:44/ 0 赞/ 443 阅读

相关 html select标签点击选中事件

html select标签点击选中事件 js事件 οnchange="gradeChange(this.options\[this.options.selecte

朱雀/ 2022年02月27日 06:46/ 0 赞/ 856 阅读

相关 js/jQuery select标签获取值/option 选中事件

前言 select标签是常规下拉菜单的第一选择常用的select标签形式 <select id="test" name="">

忘是亡心i/ 2021年09月16日 06:16/ 0 赞/ 636 阅读

相关实现select中指定option选中触发事件

我们在用到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本身没有触发事件方法，我们只有在select里的onchange方法里触发。

待我称王封你为后i/ 2021年09月14日 12:36/ 0 赞/ 360 阅读