1. 程式人生 > >select框多選(利用Bootstrap-select)

select框多選(利用Bootstrap-select)

前端HTML:

 <select  id="usertype" multiple class="selectpicker" style="width:150px;height: 38px;" >
    <option value="101" >列印條形碼</option>
    <option value="104" >質檢稽核</option>
    <option value="105" >質檢主管駁回</option>
    <option value="106" >維修質檢</option
> </select>

JS:

<script src="__PATH__/Storage/pageAllSn.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
<script>
    $(window).on(
'load', function () { $('#usertype').selectpicker({ 'selectedText': 'cat' }); }); </script>

使用效果圖:

獲取值, 

$(‘#usertype’).val()即可