selectpicker依赖bootstrap，bootstrap依赖jquery
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap-select/1.13.10/css/bootstrap-select.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-select/1.13.10/js/i18n/defaults-zh_CN.min.js"></script> </head> <body> <form>
// data-max-options="1" 最大能选择一个 <select class="selectpicker" data-live-search="true" data-max-options="1" data-style="btn-primary" id="guide_city"> </select> <button type="button" class="btn btn-primary" id="guide_submit">提交</button> </form> </body> <script type="text/javascript">
let guideJsonArray = [{"city_id":"10065","city_name":"北京"},{"city_id":"10099","city_name":"上海"},{"city_id":"10208","city_name":"重庆"}] let htmlStr = ""; for(let i in guideJsonArray){ htmlStr += '<option value="'+ guideJsonArray[i].city_id +'">'+ guideJsonArray[i].city_name +'</option>' }
// 给selectpicker赋值 $("#guide_city").html(htmlStr); $('#guide_city').selectpicker('refresh');//动态刷新 $("#guide_submit").click(function(){ console.log($("#guide_city").val()); // 获取选中的option的值
console.log($("#guidecity").find("option:selected").text(); // 获取选中的option的text }); </script> </html>