select.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <th:block th:include="include :: header('下拉框')" />
  5. <th:block th:include="include :: select2-css" />
  6. <th:block th:include="include :: bootstrap-select-css" />
  7. </head>
  8. <body class="gray-bg">
  9. <form>
  10. <div class="wrapper wrapper-content animated fadeInRight">
  11. <div class="row">
  12. <div class="col-sm-6">
  13. <div class="ibox float-e-margins">
  14. <div class="ibox-title">
  15. <h5>下拉框 <small>https://github.com/select2/select2</small></h5>
  16. </div>
  17. <div class="ibox-content">
  18. <div class="form-group">
  19. <label class="font-noraml">单选</label>
  20. <select class="form-control">
  21. <option value="">--请选择开发语言--</option>
  22. <option value="Java">Java</option>
  23. <option value="PHP">PHP</option>
  24. <option value=".NET">.NET</option>
  25. </select>
  26. </div>
  27. <div class="form-group">
  28. <label class="font-noraml">分组单选</label>
  29. <select class="form-control">
  30. <optgroup label="--请选择开发语言--">
  31. <option value="Java">Java</option>
  32. <option value="PHP">PHP</option>
  33. <option value=".NET">.NET</option>
  34. </optgroup>
  35. <optgroup label="--请选择数据库--">
  36. <option value="Oracle">Oracle</option>
  37. <option value="Mysql">Mysql</option>
  38. <option value="Sysbase">Sysbase</option>
  39. </optgroup>
  40. </select>
  41. </div>
  42. <div class="form-group">
  43. <label class="font-noraml">多选</label>
  44. <select class="form-control select2-multiple" multiple>
  45. <option value="">请选择开发语言</option>
  46. <option value="Java">Java</option>
  47. <option value="PHP">PHP</option>
  48. <option value=".NET">.NET</option>
  49. </select>
  50. </div>
  51. <div class="form-group">
  52. <label class="font-noraml">分组多选</label>
  53. <select class="form-control select2-multiple" multiple>
  54. <optgroup label="--请选择开发语言--">
  55. <option value="Java">Java</option>
  56. <option value="PHP">PHP</option>
  57. <option value=".NET">.NET</option>
  58. </optgroup>
  59. <optgroup label="--请选择数据库--">
  60. <option value="Oracle">Oracle</option>
  61. <option value="Mysql">Mysql</option>
  62. <option value="Sysbase">Sysbase</option>
  63. </optgroup>
  64. </select>
  65. </div>
  66. <hr>
  67. <div class="form-group">
  68. <label class="font-noraml">相关参数详细信息</label>
  69. <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#select2" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#select2</a></div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="col-sm-6">
  75. <div class="ibox float-e-margins">
  76. <div class="ibox-title">
  77. <h5>下拉框 <small>https://github.com/snapappointments/bootstrap-select</small></h5>
  78. </div>
  79. <div class="ibox-content">
  80. <div class="form-group">
  81. <label class="font-noraml">单选</label>
  82. <select class="form-control noselect2 selectpicker">
  83. <option value="">--请选择开发语言--</option>
  84. <option value="Java">Java</option>
  85. <option value="PHP">PHP</option>
  86. <option value=".NET">.NET</option>
  87. </select>
  88. </div>
  89. <div class="form-group">
  90. <label class="font-noraml">分组多选</label>
  91. <select class="form-control noselect2 selectpicker">
  92. <optgroup label="--请选择开发语言--">
  93. <option value="Java">Java</option>
  94. <option value="PHP">PHP</option>
  95. <option value=".NET">.NET</option>
  96. </optgroup>
  97. <optgroup label="--请选择数据库--">
  98. <option value="Oracle">Oracle</option>
  99. <option value="Mysql">Mysql</option>
  100. <option value="Sysbase">Sysbase</option>
  101. </optgroup>
  102. </select>
  103. </div>
  104. <div class="form-group">
  105. <label class="font-noraml">多选</label>
  106. <select class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>
  107. <option value="Java">Java</option>
  108. <option value="PHP">PHP</option>
  109. <option value=".NET">.NET</option>
  110. </select>
  111. </div>
  112. <div class="form-group">
  113. <label class="font-noraml">分组多选</label>
  114. <select class="form-control noselect2 selectpicker" data-none-selected-text="请选择" multiple>
  115. <optgroup label="--请选择开发语言--">
  116. <option value="Java">Java</option>
  117. <option value="PHP">PHP</option>
  118. <option value=".NET">.NET</option>
  119. </optgroup>
  120. <optgroup label="--请选择数据库--">
  121. <option value="Oracle">Oracle</option>
  122. <option value="Mysql">Mysql</option>
  123. <option value="Sysbase">Sysbase</option>
  124. </optgroup>
  125. </select>
  126. </div>
  127. <hr>
  128. <div class="form-group">
  129. <label class="font-noraml">相关参数详细信息</label>
  130. <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-select" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-select</a></div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </form>
  138. <th:block th:include="include :: footer" />
  139. <th:block th:include="include :: select2-js" />
  140. <th:block th:include="include :: bootstrap-select-js" />
  141. </body>
  142. </html>