js和jQurey中获取select标签选中的值-蒲公英云

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

网上有很多介绍，但是感觉可能有些同学看过之后还是懵懵懂懂不是很清楚，所有就写了这篇文章，详细的介绍一下关于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);
            })