js获取select选中得值
如果你值始终获取不出来,看看是不是把option的值设置成了空,例:<option value=""></option>
结构:
<div class="box">
</div>
<select id="select">
<option value="1">12</option>
<option value="2">13</option>
<option value="3">14</option>
<option value="4">15</option>
<option value="5">16</option>
</select>
第一种:
document.getElementsByClassName("box")[0].onclick=function(){//点击div触发(只是实验需要)
let dom=document.getElementById("select").value;//直接获取值
}
第二种:
document.getElementsByClassName("box")[0].onclick=function(){//点击div触发(只是实验需要)
let dom=document.getElementById("select");//获取select对象
let index=dom.selectedIndex;//返回被选中的下标
let tex=dom.options[index].text;//获取文本
let val=dom.options[index].value;//获取值
}
第三种:
这是我通过jquery的选择器模仿的一种方法
document.getElementsByClassName("box")[0].onclick=function(){
let a=0;
let dom=document.getElementById("select").querySelectorAll("option");//这就相当于jquery的$("#select option")
for (let i=0;i<dom.length;i++) {
if(dom[i].selected){//每个option都会有selected属性被选中就是true反之false
a=dom[i].text;
}
}
console.log(a);
}
附带一个jquery的方法:
很简洁,但不常用的话还是会忘(我记性不好hhhhh)
$(".box").click(function(){
let a=$("#select").val();//jquer就是快但是js也不能忘o
console.log(a);
})
$(".box").click(function(){
let a=$("#select option:selected").val();
console.log(a);
})