1 Select2文档
示例地址
源码地址
2 资源文件
<!-- styles -->
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../select2/select2.min.css">
<!-- jquery.js -->
<script src="../jquery.min.js" type="text/javascript"></script>
<!-- select2.full.min.js -->
<script src="../select2/select2.full.min.js" type="text/javascript"></script>
<!-- bootstrap.js -->
<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
3 html部分
<div class="form-group" valdr-form-group>
<label class="col-sm-3 control-label">
<apollorequiredfield></apollorequiredfield>
应用Id</label>
<div class="col-sm-3">
<select class="form-control select2 " id="testselect" name="appId" ng-model="app.appId">
</select>
<small>(应用唯一标识)</small>
</div>
</div>
4 js部分
function getappid() {
$('.select2').select2();
$.ajax({
"url": "https://api.github.com/orgs/select2/repos",
"type": "GET",
"async": false,
"data": {
//token: login_user_session,
//id: uid
},
"success": function (result) {
var obj = eval(result);
var count = Object.keys(obj.Body).length;
for (var i = 0; i < count; i++) {
var appId = obj.Body[i].id;
var appName = obj.Body[i].name;
$("#testselect").append("<option value='" + appId + "'>" + appId + ' '+'/'+' '+appName + "</option>");
}
}
});
}
getappid();
5 Select2取值
var selectedappid = $("#testselect").select2('data')[0];