使い方

ZIPファイルを解凍後、JSファイルを任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルとCSSファイルを読み込む。

<link rel="stylesheet" type="text/css" href="css/prefSelectExtension.css" />
<script type="text/javascript" src="js/prefSelectExtension.js"></script>

次に、JSファイルを開き、各設定項目をサイトに合わせて編集する。
15～20行目付近にある targetClass に、本ライブラリの対象とするselect要素に付加するターゲットクラス名をセットする。（デフォルトは pref となっているので、そのまま使う場合は変更しなくて良い）

//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	targetClass : 'pref',

以上で、ライブラリ自体の組み込みは完了となる。

補足

本ライブラリは、select要素 のマークアップに optgroup要素 の使用を推奨する。
例として、一般的な都道府県のhtmlソースを以下に記載する。

<select name="prefectural1" class="pref">
<option value="0">選択してください</option>
<optgroup label="北海道">
<option value="1">北海道</option>
</optgroup>
<optgroup label="東北">
<option value="2">青森</option>
<option value="3">秋田</option>
<option value="4">岩手</option>
<option value="5">山形</option>
<option value="6">宮城</option>
<option value="7">福島</option>
</optgroup>
<optgroup label="関東">
<option value="8">栃木</option>
<option value="9">群馬</option>
<option value="10">茨城</option>
<option value="11">埼玉</option>
<option value="12">千葉</option>
<option value="13">東京</option>
<option value="14">神奈川</option>
</optgroup>
<optgroup label="中部">
<option value="15">山梨</option>
<option value="16">長野</option>
<option value="17">新潟</option>
<option value="18">富山</option>
<option value="19">石川</option>
<option value="20">福井</option>
<option value="21">静岡</option>
<option value="22">岐阜</option>
<option value="23">愛知</option>
</optgroup>
<optgroup label="近畿">
<option value="24">三重</option>
<option value="25">和歌山</option>
<option value="26">奈良</option>
<option value="27">滋賀</option>
<option value="28">京都</option>
<option value="29">大阪</option>
<option value="30">兵庫</option>
</optgroup>
<optgroup label="中国">
<option value="31">鳥取</option>
<option value="32">岡山</option>
<option value="33">島根</option>
<option value="34">広島</option>
<option value="35">山口</option>
</optgroup>
<optgroup label="四国">
<option value="36">徳島</option>
<option value="37">香川</option>
<option value="38">愛媛</option>
<option value="39">高知</option>
</optgroup>
<optgroup label="九州">
<option value="40">福岡</option>
<option value="41">佐賀</option>
<option value="42">長崎</option>
<option value="43">熊本</option>
<option value="44">大分</option>
<option value="45">宮崎</option>
<option value="46">鹿児島</option>
<option value="47">沖縄</option>
</optgroup>
</select>