js和jQurey中获取select标签选中的值

xiaoxiao2021-02-27  527

网上有很多介绍,但是感觉可能有些同学看过之后还是懵懵懂懂不是很清楚,所有就写了这篇文章,详细的介绍一下关于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试一下,对比一下结果很容易就搞明白。

转载请注明原文地址: https://www.6miu.com/read-99.html

最新回复(0)