QUALL – blog

入力フォームで複数選択のselectボックスの値をJSで取得する。
複数選択（multiple=”multiple”）の場合との比較。

１、ひとつだけ選択できるselectボックスの場合

<script type="text/javascript">
//<![CDATA[
function selectCheck() {
    var formElement1 = document.getElementById('formId1');
    var selElement1  = document.getElementById('selId1');
    alert(selElement1.selectedIndex);
    alert(selElement1.options[selElement1.selectedIndex].value);
    alert(selElement1.options[selElement1.selectedIndex].text);
    formElement1.submit();
}
//]]>
</script>
<form id="formId1" name="formName1" method="post" action="">
    <select id="selId1" name="selName1[]">
        <option value="aaa">AAA</option>
        <option value="bbb">BBB</option>
        <option value="ccc">CCC</option>
        <option value="ddd">DDD</option>
        <option value="eee">EEE</option>
    </select>
    <input type="button" value="クリック" onclick="selectCheck()" />
</form>

２、複数選択できるselectボックス（multiple）の場合

<script type="text/javascript">
//<![CDATA[
function selectMultiCheck() {
    var formElement2 = document.getElementById('formId2');
    var selElement2  = document.getElementById('selId2');
    for (var i=0; i < selElement2.options.length; i++) {
        var option = selElement2.options[i];
        alert(option.value + " ⇒ " + option.text + " ⇒ " + option.selected);
    }
    formElement2.submit();
}
//]]>
</script>
<form id="formId2" name="formName2" method="post" action="">
    <select id="selId2" name="selName2[]" multiple="multiple">
        <option value="aaa">AAA</option>
        <option value="bbb">BBB</option>
        <option value="ccc">CCC</option>
        <option value="ddd">DDD</option>
        <option value="eee">EEE</option>
    </select>
    <input type="button" value="クリック" onclick="selectMultiCheck()" />
</form>

３、複数選択の場合のインデックス番号取得

multiple=”multiple”の場合は、ループで回すということですが
ループ内でselElement2.selectedIndexに入った値は回しても最初に選択したインデックス番号が固定値で入力されている。。

ん～インデックス番号を取得するなんかいい方法はないかな。。調べればすぐ出てくるかな。。

4、PHPでPOSTで受け取る場合

JSの処理はid属性で行うが、phpのPOSTはname属性をキーにvalue属性を値としてを受け取る仕様なので、上記コードのようにセレクトボックスにname属性を追加してやって

<select name="★★★[]">

のようにかっこをつけてやることで、POST先で配列として複数選択項目をすべて受け取ることができる。

このへんはお約束ですが。。

関連記事

• JSでイベントリスナーやらでバリデートの実装いろいろ
• formの複数選択のselectボックスの値をJSで取得する
• イベントハンドラを使わないでデザインとロジックを分割
• javascriptで独自オブジェクトを作成する

No related posts.