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