您的位置：首页 > Web前端 > JQuery

jQuery 2 Option Prop Filtering

2015-07-26 00:22 579 查看 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>:selected选中状态选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>获取处于选中状态元素的内容</h3>
        <form id="frmTest" action="#">
        <select id="Select1" multiple="multiple">
            <option value="0">苹果</option>
            <option value="1" selected="selected">桔子</option>
            <option value="2">荔枝</option>
            <option value="3" selected="selected">葡萄</option>
            <option value="4">香蕉</option>
        </select><br /><br />
        <div id="tip"></div>
        
        </form>
        
        <button id="btn1">清空选项</button>
        <button id="btn2">显示选中选项</button>
        <button id="btn3">全部选中</button>
        
        <script type="text/javascript">
            $(":button:contains(清空选项)").css("border","solid 2px red");
            $(":button:contains(全部选中)").css("border","solid 2px yellow")
            $(":button:contains(显示选中选项)").css("border","solid 2px blue")
            
            var flag = false;
             
            // 清空选项
            $("#btn1").on("click", function(){
                if(flag == false){
                    //$("#Select1 option").prop("selected", false);
                    $("#Select1 option").removeAttr("selected");
                    flag = true;
                }else{
                    
                   //$("#Select1 option").prop("selected", true);
                    $("#Select1 option").attr("selected","selected");
                    flag = false;
                }
               
                //return false;
            }) 
            
                        // 全部选中
            $("#btn3").on("click", function(){
                 if(flag == false){
                    $("#Select1 option").prop("selected", false);
                    //$("#Select1 option").removeAttr("selected");
                    flag = true;
                }else{
                    
                   $("#Select1 option").prop("selected", true);
                    //$("#Select1 option").attr("selected","selected");
                    flag = false;
                }
            })
            
            // 显示选中选项
            $("#btn2").on("click", function(){
                var strBuilder = []
                // Property filtering
                $("#Select1 option").filter(function(){
                    return $(this).prop("selected") == true;
                }).each(function(index){
                    //alert($(this).attr("value") + "-" +  $(this).text());
                    strBuilder.push($(this).attr("value") + "-" +  $(this).text());
                })
                var str = strBuilder.join("<br />");
                //alert(str);
                $("#tip").html(str);
            })
            
        </script>
    </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航