堀北真希うさぎ
主な作品
人気女優をモデルにした創作キャラクタを用いた作品の一例

ページ案内▼

選択に応じてメニューを変えるスクリプト。

選択に応じてメニューを変えるスクリプト・目次。

選択に応じてメニューを変えるスクリプトの概要。

ラジオボタンの選択肢に応じてプルダウンメニューを変えるスクリプトです。

これに依り、複雑なフォームも操作性が向上するでしょう。

まず言いたい事。

何度も書いておりますが、JAVAスクリプトは必須の技術ではないため、閲覧者の中には使えないように設定している者もいます。

選択に応じてメニューを変えるスクリプトのサンプル。

以下のフォームは、利用する新幹線を撰ぶと言うものです。

スクリプトを実行出来る環境なら、新幹線の系統をラジオボタンで撰べるようになっております。

選択すると、それに応じてメニューが変わるのが分かります。

一方スクリプトが実行出来ない環境では、ラジオボタンが表示されない代りにメニューには全新幹線が表示されます。

ご利用列車

  1. 列車名を選択して、列車番号を入力して下さい。

    号
  2. 入力を確認して、送信ボタンを押してください。

選択に応じてメニューを変えるスクリプトのソースとHTML文書での記述。

選択に応じてメニューを変えるスクリプトのソース。

選択に応じてメニューを変えるスクリプト「ChangeMenu.js」は以下のようになっております。

function changeMenu(n) {
    if (n==0) {
        with(document.forms[0].TNAME) {
            options.length=4;
            options[0].text='のぞみ';    options[0].value='nozomi';
            options[1].text='ひかり';    options[1].value='hikari';
            options[2].text='こだま';    options[2].value='kodama';
            options[3].text='つばめ';    options[3].value='tsubame';
            }
        }
    else if (n==1) {
        with(document.forms[0].TNAME) {
            options.length=5;
            options[0].text='はやて';    options[0].value='hayate';
            options[1].text='やまびこ';    options[1].value='yamabiko';
            options[2].text='なすの';    options[2].value='nasuno';
            options[3].text='つばさ';    options[3].value='tsubasa';
            options[4].text='こまち';    options[4].value='komachi';
            }
        }
    else if (n==2) {
        with(document.forms[0].TNAME) {
            options.length=3;
            options[0].text='とき';    options[0].value='toki';
            options[1].text='たにがわ';    options[1].value='tanigawa';
            options[2].text='あさま';    options[2].value='asama';
            }
        }
    else {
        with(document.forms[0].TNAME) {
            options.length=1;
            options[0].text='********';    options[0].value='';
            }
        }
    document.forms[0].TNAME.options[0].selected=true;
}

function checkEnter() {
        if (!document.forms[0].TNAME.options[document.forms[0].TNAME.selectedIndex] ||
            document.forms[0].TNAME.options[document.forms[0].TNAME.selectedIndex].value=='') {
        alert('列車名が選択されておりません！'); return(false);
        }
    if (document.forms[0].tnumber.value=='') {
        alert('列車番号が入力されておりません！'); return(false);
        }
    return(true);
}

document.write(
    '<p>ご乗車予定の新幹線を選択して下さい。</p>'+
    '<ul>'+
    '    <li><label><input type="radio" name="train" onclick="changeMenu(0);" onkeypress="return(true)" selected="selected" />東海道・山陽・九州新幹線</label></li>'+
    '    <li><label><input type="radio" name="train" onclick="changeMenu(1)" onkeypress="return(true)" />東北・山形・秋田新幹線</label></li>'+
    '    <li><label><input type="radio" name="train" onclick="changeMenu(2);" onkeypress="return(true)" />上越・信越新幹線</label></li>'+
    '    </ul>'+
    '</li>'+
    '<li>'
    );

選択に応じてメニューを変えるスクリプトを実行させるHTML文書の記述。

一方、HTML文書側には、以下のように記述されております。

<body>要素開始タグ
<body onload="changeMenu(-1);">
フォーム部分
ここでは、特にスクリプトが使えない場合のフォームを予め用意している事に注目して下さい。 
<table class="forNN4" border="0" cellspacing="0" cellpadding="0" summary="この表はネットスケープ 4.xでの表示崩れ対策で導入されているものです。"><tbody><tr><td>
    <form action=" (略) " method="post" onsubmit="return(checkEnter());">
        <fieldset>
            <legend>ご利用列車</legend>
            <ol>
                <li>
                    <script type="text/javascript" charset="shift_jis" src="ChangeMenu.js"></script>
                    <p>列車名を選択して、列車番号を入力して下さい。</p>
                    <div>
                        <select name="TNAME">
                            <option value="">【東海道・山陽・九州新幹線】</option>
                            <option value="nozomi">のぞみ</option>
                            <option value="hikari">ひかり</option>
                            <option value="kodama">こだま</option>
                            <option value="tsubame">つばめ</option>
                            <option value="">【東北・北海道・山形・秋田新幹線】</option>
                            <option value="hayate">はやて</option>
                            <option value="yamabiko">やまびこ</option>
                            <option value="nasuno">なすの</option>
                            <option value="tsubasa">つばさ</option>
                            <option value="komachi">こまち</option>
                            <option value="">【上越・信越新幹線】</option>
                            <option value="toki">とき</option>
                            <option value="tanigawa">たにがわ</option>
                            <option value="asama">あさま</option>
                            </select>
                        <input type="text" name="tnumber" value="" size="4" />号
                        </div>
                    </li>
                <li>
                    <p>入力を確認して、<samp>送信</samp>ボタンを押してください。</p>
                    <p><input type="submit" value="送信" /></p>
                    </li>
                </ol>
            </fieldset>
        </form>
    </td></tr></tbody></table>

スクリプトの構成。

このスクリプトは、以下のような仕組みになっております。

  1. <script>要素で呼出された「ChangeMenu.js」は以下の処理を行います。
    1. 先ずメニューを切り替える函数changeMenu()の定義を行ない、
    2. 続いて送信ボタンが押されたときに、正常な入力かどうかを確認する函数checkEnter()の定義も行ない、
    3. スクリプトが使える環境でのみ使えるラジオボタンをHTML文書中(すなわち、フォームの内部)に書き込みます。
  2. 読込が終わってから、<body>要素開始タグに書かれたonload属性で指定された函数「changeMenu(-1)」を起動する事で、スクリプトが使えない環境でのメニューを、スクリプトが使える環境でのものに書き換えてしまいます。

ラジオボタンが押されたときの動作。

スクリプトから書かれた<input type="radio">要素(ラジオボタン)には、全てonclick属性が埋め込まれ、これに依ってchangeMenu()函数が呼び出されるようになっております。

これにより、ラジオボタンを押す度にchangeMenu()函数が起動して<select name="TNAME>要素の内容が書き換えられていきます。

changeMenu()函数の引数の数字により、変更される内容が決まります。

実際のchangeMenu()函数の動作。

changeMenu()函数は、引数に応じて<select name="TNAME>要素の内容を書き換えます。

一般に、<select>要素の内容を書き換えるには以下の手順を踏む事になります。

  1. 先ず選択肢の個数を入れる。
  2. 各選択肢の表示内容と、送信される値を設定する。
  3. 最後にデフォルトとなる選択肢を決める。

ここでは、引数が「0」の場合の処理で解説して行きましょう。

        with(document.forms[0].TNAME) {
            options.length=4;
            options[0].text='のぞみ';    options[0].value='nozomi';
            options[1].text='ひかり';    options[1].value='hikari';
            options[2].text='こだま';    options[2].value='kodama';
            options[3].text='つばめ';    options[3].value='tsubame';
            }
        }
        …
    document.forms[0].TNAME.options[0].selected=true;
}

まず、この処理では「document.forms[0].TNAME」と言うオブジェクトが幾つも出てきます。

これをいちいち書いていくのは面倒であり、また思わぬ記述ミスが起きないとも限りません。

そこで、with文を用いて一括して略記します。

これにより、with(document.forms[0].TNAME)文内では全部optionsから書けば良い事になります。

選択肢の個数、すなわち<option>要素オブジェクトの個数は、document.forms[0].TNAME.options.lengthプロパティ(実際にはwith(document.forms[0].TNAME)文内なので「options.length」と略記している)に個数を入れる事で決められます。

その後、0番目から順に

それぞれ代入して行きます。

最後に、「document.forms[0].TNAME.options[0].selected=true;」で一番初めの選択肢をデフォルトとします。

チェック函数checkEnter()函数の動作。

この函数は送信ボタンが押されたときに起動するもので、

にエラーダイアログを出して処理を中断させます。

具体的なソースは以下のようになります。

function checkEnter() {
        if (!document.forms[0].TNAME.options[document.forms[0].TNAME.selectedIndex] ||
            document.forms[0].TNAME.options[document.forms[0].TNAME.selectedIndex].value=='') {
        alert('列車名が選択されておりません！'); return(false);
        }
    if (document.forms[0].tnumber.value=='') {
        alert('列車番号が入力されておりません！'); return(false);
        }
    return(true);
}

いずれも単純にvalueプロパティが空文字列であればエラーとすると言うものですが、<select>要素の場合は、実際に選択された項目のvalue属性値を調べなければなりません。

このため、document.forms[0].TNAME.selectedIndexプロパティを用います。

追記…オペラ 8.xでの不具合対策。

オペラ 8.02で、メニュー項目を切り替えた際に切り替えられたメニューの後方に空白の選択肢が紛れ込む不具合があります。

この空白の選択肢は正当なものでは無いため、これを撰んでしまうと、スクリプトエラーになってしまいます。

このため、checkEnter()函数の冒頭で、予め不正な空白選択肢が撰ばれていない事を確認し、撰ばれていたら列車名選択エラーと見なします。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com