<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <link rel="stylesheet" href="http://www.jq22.com/demo/bootstrapselect201901090009/css/bootstrap-select.css"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <script src="http://www.jq22.com/demo/bootstrapselect201901090009/js/bootstrap-select.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="text-center">Bootstrap multi-select</h2> </div> </div> <div class="row"> <div class="col-md-4"> <button id="showInfo" type="button" class="btn btn-success btn-lg btn-block">SHOW</button> </div> <div class="col-md-4"> <button id="hideInfo" type="button" class="btn btn-danger btn-lg btn-block">HIDDEN</button> </div> <div class="col-md-4"> <button id="chooseText" type="button" class="btn btn-warning btn-lg btn-block">Selected Information</button> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-4"> <select id="id_select" class="selectpicker" multiple data-live-search="true" data-actions-box="true"></select> </div> <div class="col-md-6 col-md-offset-4"> <label class="m-t-20 m-l-30 text-info">Selected Information:</label> <p id="labelInfo" class="m-t-5 m-l-50"></p> </div> </div> </div>

.m-t-20 { margin-top: 20px; } .m-l-30 { margin-left: 30px; } .m-t-5 { margin-top: 5px; } .m-l-50 { margin-left: 50px; }

init(); function init() { // initInfo(); } function loadInfo() { // 默认数据 var area = document.getElementById("id_select"); area.options.length = 0; result = { "6": "湖南", "7": "江苏", "8": "江西", "9": "广东", "10": "重庆", "11": "广西", "17": "浙江", "18": "湖北", "19": "山东", "20": "陕西" }; for (var item in result) { area.options.add(new Option(result[item], result[item])); } $('.selectpicker').selectpicker('refresh'); } function initInfo() { $(window).on('load', function () { $('.selectpicker').selectpicker({ // 'selectedText': 'cat', noneSelectedText: '请选择', noneResultsText: '没有找到匹配的组织 {0}' }); loadInfo(); $("#showInfo").unbind("click").click(function () { $('.selectpicker').selectpicker('show'); }); $("#hideInfo").unbind("click").click(function () { $('.selectpicker').selectpicker('hide'); }); $("#chooseText").unbind("click").click(function () { var info = $('#id_select').selectpicker('val'); var label = document.getElementById("labelInfo"); label.innerHTML = info; console.log(info) }); // 检测浏览器的方法由用户自行决定 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { $('.selectpicker').selectpicker('mobile'); } // 销毁： $('.selectpicker').selectpicker('destroy'); }); }