<!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>
jQuery 2 Option Prop Filtering
最新推荐文章于 2022-08-02 05:00:00 发布