js获取select选中的值(附带jq)

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);
			})
发布了31 篇原创文章 · 获赞 45 · 访问量 5912

猜你喜欢

转载自blog.csdn.net/weixin_43623808/article/details/102581820