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 + '&nbsp'+'/'+'&nbsp'+appName + "</option>");

                }
            }
        });


}


     getappid();

5 Select2取值

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