Bootstrap Select2獲取遠程數據

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 4.0.6-rc.1-->
<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://127.0.0.1/api/ycyzharry", 
          //"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 + '&nbsp'+'/'+'&nbsp'+appName + "</option>");
                }
            }
        });
}


     getappid();

5 Select2取值

var selectedappid = $("#testselect").select2('data')[0];

6 效果圖