温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-08 16:00:08 来源:网络 阅读:2835 作者:lifengand1992 栏目:web开发

<!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>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI