首页 > 其他 > 详细

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

时间:2016-01-14 19:15:44      阅读:285      评论:0      收藏:0      [点我收藏+]

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


本文出自 “LEEFENG” 博客,请务必保留此出处http://10173384.blog.51cto.com/10163384/1735070

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

原文:http://10173384.blog.51cto.com/10163384/1735070

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!