HTMLのSELECTボックスでmultipleを指定した場合にいい感じに表示してくれるものを探してたんですけどやっと見つけた感じ
jQueryとbootstrapとbootstrap-selectを読み込めば使えるやつ。
絞込表示とかやりたいこと完璧だったので採用。
サンプルは以下コード
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script> | |
| <script> | |
| $(window).on('load', function() | |
| { | |
| $('.selectpicker').selectpicker({ | |
| size: 25 | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="col-lg-4"> | |
| <select class="form-control selectpicker" data-live-search="true" data-selected-text-format="count > 1" multiple> | |
| <option value="/kcsapi/api_dmm_payment/paycheck">/kcsapi/api_dmm_payment/paycheck</option> | |
| <option value="/kcsapi/api_get_member/basic">/kcsapi/api_get_member/basic</option> | |
| <option value="/kcsapi/api_get_member/deck">/kcsapi/api_get_member/deck</option> | |
| <option value="/kcsapi/api_get_member/furniture">/kcsapi/api_get_member/furniture</option> | |
| <option value="/kcsapi/api_get_member/kdock">/kcsapi/api_get_member/kdock</option> | |
| <option value="/kcsapi/api_get_member/mapcell">/kcsapi/api_get_member/mapcell</option> | |
| <option value="/kcsapi/api_get_member/mapinfo">/kcsapi/api_get_member/mapinfo</option> | |
| <option value="/kcsapi/api_get_member/material">/kcsapi/api_get_member/material</option> | |
| <option value="/kcsapi/api_get_member/mission">/kcsapi/api_get_member/mission</option> | |
| <option value="/kcsapi/api_get_member/ndock">/kcsapi/api_get_member/ndock</option> | |
| <option value="/kcsapi/api_get_member/payitem">/kcsapi/api_get_member/payitem</option> | |
| <option value="/kcsapi/api_get_member/picture_book">/kcsapi/api_get_member/picture_book</option> | |
| <option value="/kcsapi/api_get_member/practice">/kcsapi/api_get_member/practice</option> | |
| <option value="/kcsapi/api_get_member/preset_deck">/kcsapi/api_get_member/preset_deck</option> | |
| <option value="/kcsapi/api_get_member/questlist">/kcsapi/api_get_member/questlist</option> | |
| <option value="/kcsapi/api_get_member/record">/kcsapi/api_get_member/record</option> | |
| <option value="/kcsapi/api_get_member/ship2">/kcsapi/api_get_member/ship2</option> | |
| <option value="/kcsapi/api_get_member/ship3">/kcsapi/api_get_member/ship3</option> | |
| <option value="/kcsapi/api_get_member/ship_deck">/kcsapi/api_get_member/ship_deck</option> | |
| <option value="/kcsapi/api_get_member/slot_item">/kcsapi/api_get_member/slot_item</option> | |
| <option value="/kcsapi/api_get_member/sortie_conditions">/kcsapi/api_get_member/sortie_conditions</option> | |
| <option value="/kcsapi/api_get_member/unsetslot">/kcsapi/api_get_member/unsetslot</option> | |
| <option value="/kcsapi/api_get_member/useitem">/kcsapi/api_get_member/useitem</option> | |
| <option value="/kcsapi/api_port/port">/kcsapi/api_port/port</option> | |
| <option value="/kcsapi/api_req_battle_midnight/battle">/kcsapi/api_req_battle_midnight/battle</option> | |
| <option value="/kcsapi/api_req_battle_midnight/sp_midnight">/kcsapi/api_req_battle_midnight/sp_midnight</option> | |
| <option value="/kcsapi/api_req_combined_battle/airbattle">/kcsapi/api_req_combined_battle/airbattle</option> | |
| <option value="/kcsapi/api_req_combined_battle/battle">/kcsapi/api_req_combined_battle/battle</option> | |
| <option value="/kcsapi/api_req_combined_battle/battleresult">/kcsapi/api_req_combined_battle/battleresult</option> | |
| <option value="/kcsapi/api_req_combined_battle/battle_water">/kcsapi/api_req_combined_battle/battle_water</option> | |
| <option value="/kcsapi/api_req_combined_battle/goback_port">/kcsapi/api_req_combined_battle/goback_port</option> | |
| <option value="/kcsapi/api_req_combined_battle/midnight_battle">/kcsapi/api_req_combined_battle/midnight_battle</option> | |
| <option value="/kcsapi/api_req_furniture/buy">/kcsapi/api_req_furniture/buy</option> | |
| <option value="/kcsapi/api_req_furniture/change">/kcsapi/api_req_furniture/change</option> | |
| <option value="/kcsapi/api_req_furniture/music_list">/kcsapi/api_req_furniture/music_list</option> | |
| <option value="/kcsapi/api_req_furniture/music_play">/kcsapi/api_req_furniture/music_play</option> | |
| <option value="/kcsapi/api_req_furniture/set_portbgm">/kcsapi/api_req_furniture/set_portbgm</option> | |
| <option value="/kcsapi/api_req_hensei/change">/kcsapi/api_req_hensei/change</option> | |
| <option value="/kcsapi/api_req_hensei/combined">/kcsapi/api_req_hensei/combined</option> | |
| <option value="/kcsapi/api_req_hensei/lock">/kcsapi/api_req_hensei/lock</option> | |
| <option value="/kcsapi/api_req_hensei/preset_delete">/kcsapi/api_req_hensei/preset_delete</option> | |
| <option value="/kcsapi/api_req_hensei/preset_register">/kcsapi/api_req_hensei/preset_register</option> | |
| <option value="/kcsapi/api_req_hensei/preset_select">/kcsapi/api_req_hensei/preset_select</option> | |
| <option value="/kcsapi/api_req_hokyu/charge">/kcsapi/api_req_hokyu/charge</option> | |
| <option value="/kcsapi/api_req_kaisou/lock">/kcsapi/api_req_kaisou/lock</option> | |
| <option value="/kcsapi/api_req_kaisou/marriage">/kcsapi/api_req_kaisou/marriage</option> | |
| <option value="/kcsapi/api_req_kaisou/open_exslot">/kcsapi/api_req_kaisou/open_exslot</option> | |
| <option value="/kcsapi/api_req_kaisou/powerup">/kcsapi/api_req_kaisou/powerup</option> | |
| <option value="/kcsapi/api_req_kaisou/remodeling">/kcsapi/api_req_kaisou/remodeling</option> | |
| <option value="/kcsapi/api_req_kaisou/slotset">/kcsapi/api_req_kaisou/slotset</option> | |
| <option value="/kcsapi/api_req_kaisou/slotset_ex">/kcsapi/api_req_kaisou/slotset_ex</option> | |
| <option value="/kcsapi/api_req_kaisou/slot_exchange_index">/kcsapi/api_req_kaisou/slot_exchange_index</option> | |
| <option value="/kcsapi/api_req_kaisou/unsetslot_all">/kcsapi/api_req_kaisou/unsetslot_all</option> | |
| <option value="/kcsapi/api_req_kousyou/createitem">/kcsapi/api_req_kousyou/createitem</option> | |
| <option value="/kcsapi/api_req_kousyou/createship">/kcsapi/api_req_kousyou/createship</option> | |
| <option value="/kcsapi/api_req_kousyou/createship_speedchange">/kcsapi/api_req_kousyou/createship_speedchange</option> | |
| <option value="/kcsapi/api_req_kousyou/destroyitem2">/kcsapi/api_req_kousyou/destroyitem2</option> | |
| <option value="/kcsapi/api_req_kousyou/destroyship">/kcsapi/api_req_kousyou/destroyship</option> | |
| <option value="/kcsapi/api_req_kousyou/getship">/kcsapi/api_req_kousyou/getship</option> | |
| <option value="/kcsapi/api_req_kousyou/remodel_slot">/kcsapi/api_req_kousyou/remodel_slot</option> | |
| <option value="/kcsapi/api_req_kousyou/remodel_slotlist">/kcsapi/api_req_kousyou/remodel_slotlist</option> | |
| <option value="/kcsapi/api_req_kousyou/remodel_slotlist_detail">/kcsapi/api_req_kousyou/remodel_slotlist_detail</option> | |
| <option value="/kcsapi/api_req_map/next">/kcsapi/api_req_map/next</option> | |
| <option value="/kcsapi/api_req_map/select_eventmap_rank">/kcsapi/api_req_map/select_eventmap_rank</option> | |
| <option value="/kcsapi/api_req_map/start">/kcsapi/api_req_map/start</option> | |
| <option value="/kcsapi/api_req_member/get_incentive">/kcsapi/api_req_member/get_incentive</option> | |
| <option value="/kcsapi/api_req_member/get_practice_enemyinfo">/kcsapi/api_req_member/get_practice_enemyinfo</option> | |
| <option value="/kcsapi/api_req_member/itemuse">/kcsapi/api_req_member/itemuse</option> | |
| <option value="/kcsapi/api_req_member/itemuse_cond">/kcsapi/api_req_member/itemuse_cond</option> | |
| <option value="/kcsapi/api_req_member/payitemuse">/kcsapi/api_req_member/payitemuse</option> | |
| <option value="/kcsapi/api_req_member/updatecomment">/kcsapi/api_req_member/updatecomment</option> | |
| <option value="/kcsapi/api_req_member/updatedeckname">/kcsapi/api_req_member/updatedeckname</option> | |
| <option value="/kcsapi/api_req_mission/result">/kcsapi/api_req_mission/result</option> | |
| <option value="/kcsapi/api_req_mission/return_instruction">/kcsapi/api_req_mission/return_instruction</option> | |
| <option value="/kcsapi/api_req_mission/start">/kcsapi/api_req_mission/start</option> | |
| <option value="/kcsapi/api_req_nyukyo/speedchange">/kcsapi/api_req_nyukyo/speedchange</option> | |
| <option value="/kcsapi/api_req_nyukyo/start">/kcsapi/api_req_nyukyo/start</option> | |
| <option value="/kcsapi/api_req_practice/battle">/kcsapi/api_req_practice/battle</option> | |
| <option value="/kcsapi/api_req_practice/battle_result">/kcsapi/api_req_practice/battle_result</option> | |
| <option value="/kcsapi/api_req_practice/midnight_battle">/kcsapi/api_req_practice/midnight_battle</option> | |
| <option value="/kcsapi/api_req_quest/clearitemget">/kcsapi/api_req_quest/clearitemget</option> | |
| <option value="/kcsapi/api_req_quest/start">/kcsapi/api_req_quest/start</option> | |
| <option value="/kcsapi/api_req_quest/stop">/kcsapi/api_req_quest/stop</option> | |
| <option value="/kcsapi/api_req_ranking/getlist">/kcsapi/api_req_ranking/getlist</option> | |
| <option value="/kcsapi/api_req_sortie/airbattle">/kcsapi/api_req_sortie/airbattle</option> | |
| <option value="/kcsapi/api_req_sortie/battle">/kcsapi/api_req_sortie/battle</option> | |
| <option value="/kcsapi/api_req_sortie/battleresult">/kcsapi/api_req_sortie/battleresult</option> | |
| <option value="/kcsapi/api_start2">/kcsapi/api_start2</option> | |
| </select> | |
| </div> | |
| </body> | |
| </html> |
ぅゎょぅι゛ょっょぃ 