0

この初心者ユーザーを許してください！ユーザーがコンサート プログラムのリストから選択し、選択したプログラムの日付 (2 つまたは 3 つの関連する日付から) を選択するテーブルを作成しようとしています。同じプルダウン メニューのセットをさらに 3 回繰り返す必要があります。これは、パトロンが 6 つのプログラムから 4 つを選択し、各プログラムの希望日を選択できる部分シーズン サブスクリプション パッケージです。すべての情報は、処理/購入のために Paypal に投稿する必要があります。

このテスト ページを参照してください: http://early-music.org/Test_forTzN.htmlおよびこの jsfiddle.net ページ: jsfiddle.net/saraswati/v6Pur/31

Web ページでわかるように、私のスクリプトは「コンサート 1」では機能しますが、コンサート 2、3、および 4 では機能しません。jsfiddle ページでは、コンサート 1 でさえ機能しません。

ご協力ありがとうございました！

コードは次のとおりです。

<script type="text/javascript">
        var progamsAndDates = {};
        progamsAndDates['TUDORS'] = ['Sept. 15', 'Sept. 16'];
        progamsAndDates['NOCHES'] = ['Oct. 20', 'Oct. 21'];
        progamsAndDates['CHRISTMAS'] = ['Dec. 14', 'Dec. 15', 'Dec. 16'];
        progamsAndDates['CELTIC'] = ['Jan. 26', 'Jan. 27'];
        progamsAndDates['UNREQUITED'] = ['Mar. 02', 'Mar. 03'];
        progamsAndDates['SECRET'] = ['Apr. 20', 'Apr. 21'];

        function ChangeDateDropList (id) { 

            var programDropList = document.getElementById ("program"+id);
            var dateDropList = document.getElementById ("date"+id);
            var selProgram = programDropList.options[programDropList.selectedIndex].value;

            // remove all dates
            while (dateDropList.options.length) {
                dateDropList.remove (0);
            }

            // add new dates
            var dates = progamsAndDates[selProgram];
            if (dates) {
                for (var i=0; i < dates.length; i++) {
                    var date = new Option (dates[i], i);
                    dateDropList.options.add (date);
                }
            }
        } 
  </script>


<tr id=row2>
<td><input type="hidden" name="os0" value="Concert 1"><body onload="ChangeDateDropList ();">   
    <select id="program" onchange="ChangeDateDropList();"> 
        <option value="" selected="selected">Select a Program</option> 
        <option value="TUDORS">The Tudors</option> 
        <option value="NOCHES">Noches, Noches</option> 
        <option value="CHRISTMAS">Christmas Eurotour</option> 
        <option value="CELTIC">Celtic Trinity</option>
        <option value="UNREQUITED">Unrequited Love</option>
        <option value="SECRET">Secret No More</option> 
    </select> 

    <select id="date"> 
    </select> 
</body>
</td>

<td><input type="hidden" name="os1" value="Concert 2"><body onload="ChangeDateDropList ();">   
    <select id="program1" onchange="ChangeDateDropList(1);"> 
        <option value="" selected="selected">Select a Program</option> 
        <option value="TUDORS">The Tudors</option> 
        <option value="NOCHES">Noches, Noches</option> 
        <option value="CHRISTMAS">Christmas Eurotour</option> 
        <option value="CELTIC">Celtic Trinity</option>
        <option value="UNREQUITED">Unrequited Love</option>
        <option value="SECRET">Secret No More</option> 
    </select> 

    <select id="date1"> 
    </select>
</body> 
</td>

<td><input type="hidden" name="os2" value="Concert 3"><body onload="ChangeDateDropList ();">   
    <select id="program2" onchange="ChangeDateDropList(2);"> 
        <option value="" selected="selected">Select a Program</option> 
        <option value="TUDORS">The Tudors</option> 
        <option value="NOCHES">Noches, Noches</option> 
        <option value="CHRISTMAS">Christmas Eurotour</option> 
        <option value="CELTIC">Celtic Trinity</option>
        <option value="UNREQUITED">Unrequited Love</option>
        <option value="SECRET">Secret No More</option> 
    </select> 

    <select id="date2"> 
    </select> 
</body>
</td>

<td><input type="hidden" name="os3" value="Concert 4"><body onload="ChangeDateDropList ();">   
    <select id="program3" onchange="ChangeDateDropList(3);"> 
        <option value="" selected="selected">Select a Program</option> 
        <option value="TUDORS">The Tudors</option> 
        <option value="NOCHES">Noches, Noches</option> 
        <option value="CHRISTMAS">Christmas Eurotour</option> 
        <option value="CELTIC">Celtic Trinity</option>
        <option value="UNREQUITED">Unrequited Love</option>
        <option value="SECRET">Secret No More</option> 
    </select> 

    <select id="date3"> 
    </select> 
</body>
</td>
</tr>
</table>
<br>
<center>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</center>
4

1 に答える 1

0

いくつかの問題があります。

  1. 複数の「プログラム」要素と「日付」要素があります。それらのそれぞれには、独自の一意の ID が必要なので、JavaScript でどの ID を参照しているかがわかります。

  2. ChangeDateDropList 関数は 1 つの引数を想定しており、何も渡していません。（注：これは間違った構文ではありません。関数に引数を渡す必要がある正しいルートをたどっているように見えるので、それを指摘するだけですが、関数呼び出しで実際に引数を渡すのを忘れていました）。

これを修正する最も簡単な方法は、「program1」、「date1」、「program2」、「date2」など、各プログラムと日付要素の名前を数値サフィックスで変更することです。 ChangeDateDropList 関数を使用し、それを使用して要素を正しく参照します。

function ChangeDateDropList (id) { 

        var programDropList = document.getElementById ("program"+id);
        var dateDropList = document.getElementById ("date"+id);
        ...

onchange 呼び出しも更新することを忘れないでください。

<select id="program1" onchange="ChangeDateDropList(1);">
于 2013-04-03T20:56:36.633 に答える