继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

获取和设置select的选中项的值

远看寒山石径斜
关注TA
已关注
手记 268
粉丝 25
获赞 149

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>获取select的选中项的值</title>

</head>

<body>

<select id="select0">

    <option value="0">请选择选项</option>

    <option value="1">选项一</option>

    <option value="2">选项二</option>

    <option value="3">选项三</option>

    <option value="4">选项四</option>

    <option value="5">选项五</option>

</select>

</body>

</html>

<script src="jquery-2.1.1.min.js"></script>

<script>

    window.onload=function(){

        var tags=document.getElementsByTagName("select");

        //通过javascript来获取select的选中项【】

        var s=document.getElementById("select0");

        s.selectedIndex=2;//设置选中项的索引

        var index= s.selectedIndex;//获取选中项的索引

        console.log(s.options[index].value);//输出选中项的值:value=3

        console.log(s.options[index].text);//输出选中项的option里面的值:选项三

        //通过下面方法也可以获取下面的值

        var selectedValue=document.getElementById("select0").value;

        console.log(selectedValue);


        //通过jquery方法去设置和获取

        console.log($("#select0").find("option:selected").text());//得到选中的option的里面的text

        console.log($("#select0").val());//得到选中的值

        $("#select0").val(1);//设置选中的值

        console.log($("#select0").val());


        //jquery和javascript的结合使用

        var sIndex=$("#select0").get(0).selectedIndex;

        //根据text=‘选项四’,来选中该项

        $("#select0 option[text='选项一']").attr("selected","true");


        $("#select0 option[value='2']").remove();//删除value='2'的选项删除

        //把除了第一项的其他项都删除

        $("#select0 option[value!='0']").remove();//可用于在多个选择框相互关联,然后当其中一个选项框开始选中时,清空另一个选项框。

    };

</script>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP