select事件监听及选中

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>

select事件监听及选中相关推荐

【JavaScript】select 事件监听及选中
效果代码 Html  <div class="create-block"><div class="create ...
Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作
<div id="divId" class="divTable"><div class="tableBody">&l ...
layui select(下拉框)修改事件监听
layui select(下拉框)修改事件监听示例(节选): 当下拉框选项修改后,自动执行my_function函数. HTML部分: <select id="camera_strea ...
layui监听当前页_事件监听 · layui使用手册 · 看云
# 事件监听语法:form.on('event(过滤器值)', callback); form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时 ...
[JS-DOM]事件监听机制
事件监听机制概念:某些组件被执行了某些操作后,触发某些代码的指行.*事件: 某些操作.如:单击,双击,键盘按下了,鼠标移动了.*事件源:组件.如:按钮,文本输入框...*监听器:代码.*注册监听:将 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
Fabricjs对Canvas画布和对象的事件监听
场景 Fabricjs一个简单强大的Canvas绘图库快速入门: Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上, ...
ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听
官网示例地址:ol-ext 代码地址: ol-ext: openlayers开源插件库文档api:查看OpenLayers - Welcome 简单功能示例自己项目中用到的是等比例缩放,旋转, ...

select事件监听及选中

change事件

选中option

select事件监听及选中相关推荐

最新文章

热门文章