网上有很多介绍,但是感觉可能有些同学看过之后还是懵懵懂懂不是很清楚,所有就写了这篇文章,详细的介绍一下关于select标签value的情况
1.在原生js中
<select id="mys">
<option>请选择</option>
<option value="0">这是第一项</option>
<option value="1">这是第二项</option>
</select>
<script type="text/javascript">
var s = document.getElementById("mys");
var opts=s.options;//获取所有的option对象
//opts[i].innerHTML; 获取第i个option对象的文本值
s.onchange = function() {
console.log(s.value);
console.log(opts[s.value].innerHTML);
}
</script>
在上面的代码中,我们创建了一个select标签,并且对其进行了onchange事件监听,在代码中我们可以看到select的每一项都有value值和文本值。很明显根据代码我们可以得出:
1.如果option没有设置value,那么当点击该选项的时候,获取到的(s.value)是该选项的文本值
2.如果option设置了value,那么当点击该选项的时候,获取到的(s.value)是该选项的value值
3.s.options------------------------------获取到所有的option标签
4.opts[i].innerHTML------------------获取到对应的option的文本值
2.在jQurey 中
<select id="mys2">
<option>请选择</option>
<option value="0">这是第一项</option>
<option value="1">这是第二项</option>
</select>
<script type="text/javascript">
$("#mys2").change(function(){
var num=$("#mys2").val();//获取选中的option的value值
console.log(num);
var str=$("#mys2 option:selected").html();
console.log(str);
})
同样的,可以得出:
1.如果option没有设置value,那么$("mys2").val()获取到的就是option对应的文本值
2.如果option设置了value,那么得到的就是option对应的value值
3.$("mys2 option:selected").html()-----------------------------------获取所选中的option的文本值
4.$("mys2").find("option:selected").html()--------------------------也可以获取到所选中的option中的文本值
3.平时使用的时候一般情况下都可以获取到,可以写个demo试一下,对比一下结果很容易就搞明白。