select2 下拉框搜索插件
- 官網[https://select2.org/](https://select2.org/)
-github[https://github.com/select2/select2](https://github.com/select2/select2)
**用法：
* $("#mySelect").select2()
select具有搜索功能
也可以使用ajax獲取數據渲染select2
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select2的使用</title>
<link rel="stylesheet" href="../css/select2/css/select2.min.css">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/select2/js/select2.min.js"></script>
<script src="../js/select2/js/i18n/zh-CN.js"></script>
</head>
<body>
<div>
<h1>select2的使用</h1>
<select id="mySelect01">
<option value="北京"> 北京</option>
<option value="天津"> 天津</option>
<option value="上海"> 上海</option>
<option value="重慶"> 重慶</option>
<option value="河北"> 河北</option>
<option value="山西"> 山西</option>
<option value="遼寧"> 遼寧</option>
<option value="吉林"> 吉林</option>
<option value="黑龍江"> 黑龍江</option>
<option value="江蘇"> 江蘇</option>
<option value="浙江"> 浙江</option>
<option value="安徽"> 安徽</option>
<option value="福建"> 福建</option>
<option value="江西"> 江西</option>
<option value="山東"> 山東</option>
<option value="河南"> 河南</option>
<option value="湖北"> 湖北</option>
<option value="湖南"> 湖南</option>
<option value="廣東"> 廣東</option>
<option value="海南"> 海南</option>
<option value="四川"> 四川</option>
<option value="貴州"> 貴州</option>
<option value="雲南"> 雲南</option>
<option value="陝西"> 陝西</option>
<option value="甘肅"> 甘肅</option>
<option value="青海"> 青海</option>
<option value="內蒙古"> 內蒙古</option>
<option value="廣西"> 廣西</option>
<option value="西藏"> 西藏</option>
<option value="寧夏"> 寧夏</option>
<option value="新疆維吾爾自治區"> 新疆維吾爾自治區</option>
<option value="香港"> 香港</option>
<option value="澳門"> 澳門</option>
<option value="臺灣"> 臺灣</option>
</select>
<select id="mySelect02"></select>
<select id="mySelect03"></select>
</div>
<script>
$(function () {
$("#mySelect01").select2({
language: "zh-CN",
width: 200,
});
$("#mySelect02").select2({
language: "zh-CN",
width: 200,
data: [{id: 12, text: '小明'}, {id: 12, text: '小李'}, {id: 12, text: '小王'}, {id: 12, text: '小強'}]
});
var datas;
$.ajax({
type: "GET",
url: "http://www.kuwo.cn/api/www/bang/bang/musicList?bangId=16&pn=1&rn=30&reqId=7b2f8ac0-cdec-11e9-a585-09253a481f48",
success: function (data) {
datas = data.data.musicList;
// console.log(datas);
var dataArray = [];
/* $(datas).each(function (i,val) {
dataArray.push({id:val.albumid,text:val.album});
})*/
$.each(datas, function (i, val) {
dataArray.push({id: val.albumid, text: val.album});
})
console.log(dataArray);
$("#mySelect03").select2({
language: "zh-CN",
width: 200,
data: dataArray
})
}
});
})
</script>
</body>
</html>
