select2 取值 遍歷 設置默認值
本章內容主要介紹Select2 的初始化，獲取選中值，設置默認值，三個方法。Select2 美化了單選框，復選框和下拉框，特別是下拉框多選的問題。但同時，Select2也有很多吭。
效果圖：
使用Select2實現下拉框多選，並獲取選中值，初始設置默認值
技術：select2.js ，prototype.js，jquery.js
源碼：https://github.com/ITDragonBlog/daydayup/tree/master/JQuery-select2/select2-4.0.0
說明：select2是jquery插件，取值和設置默認值都可以用jquery單獨完成。為什么用prototype.js ？因為在公司用prototype.js 寫的，筆者因為各種原因，沒有用jquery重寫（原諒我比較懶）。還有一點值得注意：獲取的文本值可能有空格哦！！！筆者就是被吭了一臉！
一切盡在代碼中：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>select2實例</title>
<<link rel="stylesheet" href="bootstrap/3.3.0/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="select2-4.0.0/dist/css/select2.min.css" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="select2-4.0.0/dist/js/select2.min.js"></script>
</head>
<body>
<label class="control-label col-sm-1">個性標簽（checkbox）: </label>
<div class="col-sm-3">
<select class="select_gallery-multiple" multiple="multiple" style="width:100%;" onchange="getSelectData()" id="mul-itdragon">
<optgroup label="這樣真的好么？">
<option value="0">打野</option>
<option value="01">上單</option>
<option value="02">中單</option>
<option value="03">送人頭</option>
</optgroup>
<optgroup label="職位">
<option value="1">土豪</option>
<option value="2">屌絲</option>
<option value="3">單身dog</option>
<option value="4">蘋果粉</option>
<option value="5">苦逼程序員</option>
</optgroup>
</select>
</div>
<label class="control-label col-sm-1">個性標簽（radio）: </label>
<div class="col-sm-3">
<select class="select_gallery" style="width:100%;" id="itdragon">
<optgroup label="這樣真的好么？">
<option value="0">打野</option>
<option value="01">上單</option>
<option value="02">中單</option>
<option value="03">送人頭</option>
</optgroup>
<optgroup label="職位">
<option value="1">土豪</option>
<option value="2">屌絲</option>
<option value="3">單身dog</option>
<option value="4">蘋果粉</option>
<option value="5">苦逼程序員</option>
</optgroup>
</select>
</div>
<script type="text/javascript">
var $jq = jQuery.noConflict();
// 初始化多選select2
$jq(".select_gallery-multiple").select2();
// 初始化單選select2
$jq(".select_gallery").select2();
// 默認選擇
select2ByText ("mul-itdragon", "苦逼程序員");
select2ByValue ("itdragon", "03");
// 通過id獲取select2的value值
function getSelect2Value(obj) {
var select2Obj = $jq('#'+obj).select2();
return select2Obj.select2("val");
}
// 通過id獲取select2的text值，這里的text值可能有空格，需注意
function getSelect2Text(obj) {
var select2Obj = $jq('#'+obj).select2();
return select2Obj.find("option:selected").text();
}
// 通過text 設置select2的默認值
function select2ByText (obj, text) {
var select2Obj = $jq('#'+obj).select2();
$(obj).select("option").each(function(data){
if (text == data.text.strip()) {
select2Obj.val(data.value).trigger("change");
}
});
}
// 通過value 設置select2的默認值
function select2ByValue (obj, value) {
var select2Obj = $jq('#'+obj).select2();
select2Obj.val(value).trigger("change");
}
function getSelectData(){
console.log(getSelect2Value("mul-itdragon"));
console.log(getSelect2Text("itdragon"));
var mulItdragonVal = $jq("#mul-itdragon").select2("val");
if (null == mulItdragonVal) {
console.log("Over !");
return ;
}
console.log(mulItdragonVal);
var mulItdragonData = $jq("#mul-itdragon").select2('data');
mulItdragonData.each(function(data){
console.log("value : ", data.id);
console.log("text : ", data.text);
});
}
</script>
</body>
</html>
這樣就做好了，是不是很簡單，如果不能滿足你的需求，可以去官網學習：http://select2.github.io/examples.html