jQuery 2 Option Prop Filtering

来源：互联网发布：dlp数据防泄漏产品编辑：程序博客网时间：2024/05/02 23:01
<!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>
0 0