AngularJs + bootstrap实现下拉选择框

引入bootstrap-select.js、bootstrap-select.css

方式一

<script>
    $(function() {
        $('.selectpdept').selectpicker({'liveSearch': true,'actionsBox': true})
    });
</script>

<select name="departInfo" ng-model="searchArgQry.departInfoSet" 
 class="form-control selectpdept" multiple size="1">
        <c:forEach items="${departInfoList}" var="departInfo">
            <option value="${departInfo.id}">${departInfo.deptName}</option>
         </c:forEach>
 </select>

其中departInfoList为一个List对象

方式二

<script>
    $(function() {
        $('.selectpdept').selectpicker({'liveSearch': true,'actionsBox': true})
    });
</script>

<select class="form-control selectpdept" name="deptId" ng-model="searchArg.deptId"
     multiple ng-options="k as v for (k, v) in allDept" size="1">
</select>

其中allDept为Map对象,key为ID,value为值

效果:
这里写图片描述

猜你喜欢

转载自blog.csdn.net/huangdi1309/article/details/79655090