1. 程式人生 > >bootstrap省市聯動下拉控制元件的使用

bootstrap省市聯動下拉控制元件的使用

bootstrap城市選擇控制元件

控制元件效果如下圖所示:



支援全國所有城市的選擇。支援input框搜尋模糊查詢城市

使用方法:

1.按照順序引入的檔案,相關外掛下載地址在文章末尾的GitHub網址:

  1. <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
  2. <link href="css/city-picker.css" rel="stylesheet" type="text/css" />
  3. <link href="css/main.css" rel="stylesheet" type="text/css" />
  1. script src="js/jquery.js"></script>
  2. <script src="js/bootstrap.js"></script>
  3. <script src="js/city-picker.data.js"></script>
  4. <script src="js/city-picker.js"></script>
  5. <script src="js/main.js"></script>
2.在前端頁面中插入下面的程式碼:
  1. <div class="docs-methods">
  2. <form
    class="form-inline">
  3. <div id="distpicker">
  4. <div class="form-group">
  5. <div style="position: relative;">
  6. <input id="city-picker3" class="form-control" readonly type="text" value="江蘇省/常州市/溧陽市" data-toggle="city-picker">
  7. </div>
  8. </div>
  9. <div class
    ="form-group">
  10. <button class="btn btn-warning" id="reset" type="button">重置</button>
  11. <button class="btn btn-danger" id="destroy" type="button">確定</button>
  12. </div>
  13. </div>
  14. </form>
  15. </div>
引入成功!

外掛下載地址:https://github.com/Nemo0000/MyProject