ドロップダウンリストの中にチェックボックスを入れる。

チェックボックスのリストが大量になるアンケートフォームを作成していると、それを並べるだけでページが長くなってしまうことが多いので、チェックボックスをプルダウンメニューにしておきたい。

で、jQueryを使うことに。

DROPDOWN CHECK LIST (jQuery)


使い方は、簡単。

<script type="text/javascript" src="./js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.13.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery-ui-1.8.13.custom.css">
<script type="text/javascript" src="./js/ui.dropdownchecklist-1.4-min.js"></script>

こんな感じでjQueryとjQuery-UI、それからdropdownchecklist.jsを読み込んでおく。
で、使いたいページのヘッダーに以下を記述。

$(document).ready(function() {
    $("#id").dropdownchecklist( {width: 200 } );
});

あとは、select-boxの「id」に「#id」で指定したidを入れてあげるだけ。

<select id="id" multiple="multiple" name="Ans[]">
    <option>中城御殿跡</option>
    <option>安谷川御嶽</option>
    <option>仲田殿内跡</option>
    <option>安谷川</option>
    <option>板井戸</option>
    <option>上之橋</option>
    <option>本家新垣菓子店</option>
    <option>新垣カミ菓子店</option>
    <option>羽地朝秀生家跡</option>
    <option>佐司笠樋川</option>
    <option>世果報御井小</option>
    <option>盛光寺</option>
    <option>宝口樋川</option>
</select>

こんな感じになりますた。