下拉列表选项不起作用答案

【问题标题】：Pulldown list options aren't working下拉列表选项不起作用
【发布时间】：2013-04-03 19:18:55
【问题描述】：

请原谅这位新手用户！我正在尝试创建一个表格，用户可以在其中从音乐会节目列表中进行选择，然后为所选节目选择一个日期（从 2 个或 3 个相关日期中）。同一组下拉菜单必须再重复 3 次。这是一个部分季节订阅包，其中顾客可以选择 6 个节目中的 4 个以及每个节目的所需日期，所有这些信息都需要发布到 Paypal 进行处理/购买。

请查看此测试页面：http://early-music.org/Test_forTzN.html 和此 jsfiddle.net 页面：jsfiddle.net/saraswati/v6Pur/31

正如在网页上看到的那样，我的脚本适用于“Concert 1”，但不适用于 Concerts 2、3 和 4。在 jsfiddle 页面上，甚至 Concert 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>

标签： javascript paypal

【解决方案1】：

你有几个问题：

您有多个“程序”和“日期”元素。每一个都需要自己的唯一 ID，以便您知道您在 javascript 中指的是哪一个。
您的 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);">

【讨论】：

非常感谢您的详细分析！祈祷我现在可以解决这个问题。干杯！
不客气。如果此答案解决了您的问题，请单击答案旁边的复选标记将其选为正确答案。（或者你可以先等着看还有什么其他答案）
好吧，我太密集了，因为我仍然无法让它工作。我做了你建议的改变，但我一定还是遗漏了一些东西。 :(
非常感谢您的帮助！这是链接：jsfiddle.net/saraswati/v6Pur/17
您忘记使用后缀更新“日期”名称，例如：