Kawa.netxp JKL.Form - セレクト／チェックボックスの操作

JKL.Form クラスを利用したセレクト／チェックボックスの操作手順です。

JavaScript ソースのダウンロードはこちら： jkl-form.js
（右クリックして［対象をファイルに保存］を選択）

JKL.Form クラスは、以下のブラウザで動作確認済みです。

• Windows Internet Explorer 6.0
• Windows Firfox 1.0
• Windows Opera 7.5

form1 = new JKL.Form("formid");

まず、フォーム要素の id 属性の値を指定して、JKL.Form を初期化してください。

<script type="text/javascript" src="jkl-form.js" charset="Shift_JIS"></script>
<script><!--
    form1 = new JKL.Form("formid");
// --></script>
<form id="formid" method="get" action="#">
     (中略)
</form>

new JKL.Form() を呼び出す初期化の時点では formid は存在しなくても構いません。
以後は form1 変数を利用して、以下のようなフォームの操作ができるようになります。
この form1 というインスタンス変数名は、何でも構いません。 form2 でも theform でも f でも好きな変数名を使用できます。 ページ中に複数のフォームがある場合は、それぞれ別の変数名にします。

form1.upDownSelectedOptions( "変数名", -1 ); // 上に移動
form1.upDownSelectedOptions( "変数名", +1 ); // 下に移動

<select> 要素で選択されている項目を上下に移動します。
<select> 要素では、size="" 属性で表示行数を指定できます。
multipleあり（＝複数選択可）・なし（＝通常。単一選択）どちらの <select> 要素でも利用できます。

Internet Explorer 6.X Internet Explorer 5.X Netscape Communicator 4.X Firefox 1.X Safari 1.X Opera 7.X その他

form1.upDownSelectedOptions()

form1.addOption( "変数名", "値" );
form1.selectOptionsByText( "変数名", "値" );
form1.deleteOptionsByText( "変数名", "値" );
form1.deleteSelectedOptions( "変数名" );

<select> 要素に選択肢の項目を追加・削除します。

Internet Explorer 6.X Internet Explorer 5.X Netscape Communicator 4.X Firefox 1.X Safari 1.X Opera 7.X その他

form1.addOption() form1.selectOptionsByText() form1.deleteOptionsByText() form1.deleteSelectedOptions()

form1.selectAllOptions( "変数名", true ); // 全選択
form1.selectAllOptions( "変数名", false ); // 全解除

全ての選択肢を一括で選択・解除します。
セレクトマルチプル・チェックボックスのどちらでも利用できます。
単一選択のセレクト・ラジオボタンでは利用できません。

Internet Explorer 6.X Internet Explorer 5.X Netscape Communicator 4.X Firefox 1.X Safari 1.X Opera 7.X その他

form1.selectAllOptions()

Internet Explorer 6.X Internet Explorer 5.X Netscape Communicator 4.X Firefox 1.X Safari 1.X Opera 7.X その他

form1.selectAllOptions()