匯入樣式以及js。（jeesite已經在head.jsp中匯入，不用自己導）

<link href="/jquery-select2/3.4/select2.min.css" rel="stylesheet" />
<script src="/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>

javaScript：

function skillInfoList() {
         $.ajax({
            url:'${ctx}/skillInfo/skillInfoList',
            type:'GET',
            data:{

            },
            dataType:'json',
            success:function (data) {
               if(data !=undefined && data !=null && (data.ret == 0 ||data.ret =="0")){
                  $(".skillInfo").select2({         // $(".").select2({ }) 語句將div渲染成下拉框 。
//                            data: data.obj, //根據ajax獲得的資料
                     data:[{"id":"1","text":"技能1"},{"id":"2","text":"技能2"}],//已知下拉選項是什麼，直接寫死。
                     placeholder:'請選擇',
                     allowClear:true
                  })
               } else{
                  alert(data.message);
               }
            }
         })
      }
 

注：介面與前端互動的json格式：

1. {
2. "ret":"0", 0：成功 1 失敗
3. "message":"success", 提示資訊
4. "obj":[{"id":"1","text":"技能1"},{"id":"2","text":"技能2"}] 業務資料
5. }

html：

<div class="control-group">
   <label class="control-label">技能職稱：</label>
   <div class="controls">
         <div class="skillInfo" id="skillInfo"></div>
   </div>
</div>
 

下拉框效果：