需求:
点击一个option,可以获取对应的value值。
效果:
代码如下:
这里重点是确定在什么时候获得indexs,我选择的是当select的值发生改变的时候。
我爱
var selects = document.getElementById("select");
selects.onchange = function () {
var indexs = selects.selectedIndex; //选中项的索引
console.log(selects.options[indexs].value);
}
踩雷:
1.这个方法始终获取到的是第一个option的索引,而且不会变。
我爱
var indexs = selects.selectedIndex; //选中项的索引
console.log(selects.options[indexs].value);
这里我是用了一个延迟来看出问题的:这样会在还没到时间之前点击option来获取对应value
我爱
setTimeout(() => {
var indexs = selects.selectedIndex; //选中项的索引
console.log(selects.options[indexs].value);
console.log(selects.options[indexs].text);
}, 6000)
2.使用onclick触发事件,这样也是一直输出第一个
我爱
var selects = document.getElementById("select");
selects.onclick = function () {
var indexs = selects.selectedIndex; //选中项的索引
console.log(selects.options[indexs].value);
}