Пожалуйста, простите этого начинающего пользователя! Я пытаюсь создать таблицу, в которой пользователь будет выбирать из списка концертных программ, а затем выбрать дату (из 2 или 3 связанных дат) для выбранной программы. Тот же набор раскрывающихся меню необходимо повторить еще 3 раза. Это пакет подписки на неполный сезон, в котором клиент может выбрать 4 из 6 программ и желаемую дату для каждой программы, и всю эту информацию необходимо отправить в Paypal для обработки / покупки.

См. Эту тестовую страницу: http://early-music.org/Test_forTzN.html и это Страница jsfiddle.net: jsfiddle.net/saraswati/v6Pur/31

Как видно на веб-странице, мой сценарий работает для «Концерта 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>
0
Saraswati 3 Апр 2013 в 23:18
1
Укажите jsfiddle.net или аналогичный вместо ссылки на свою страницу. Это позволяет проводить живое тестирование.
 – 
mr.VVoo
3 Апр 2013 в 23:21
2
Все выбранные вами элементы имеют одинаковый select id="program". Это неправильно, идентификатор должен быть уникальным в данном dom.document. Ваша ссылка отсюда не работает.
 – 
Sebas
3 Апр 2013 в 23:23
Мистер Ву: Извините. Я только что создал здесь jsfiddle: jsfiddle.net/saraswati/v6Pur
 – 
Saraswati
3 Апр 2013 в 23:47
Себас: Спасибо за критику. Не знаю, как это исправить, но попробую.
 – 
Saraswati
3 Апр 2013 в 23:49
Еще один комментарий: странно, что выбор работает для Концерта 1 на моей тестовой веб-странице, но не на странице jsfiddle. Спасибо за вашу помощь!
 – 
Saraswati
3 Апр 2013 в 23:55

1 ответ

Лучший ответ

У вас есть пара вопросов:

  1. У вас есть несколько элементов "программа" и "дата". Каждому из них нужен свой уникальный идентификатор, чтобы вы знали, на какой из них вы ссылаетесь в своем javascript.

  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);"> 
0
TheOx 4 Апр 2013 в 00:56
Большое спасибо за подробный анализ! Скрестив пальцы, я могу исправить это сейчас. Ваше здоровье!
 – 
Saraswati
4 Апр 2013 в 01:05
Пожалуйста. Если этот ответ решил вашу проблему, выберите его как правильный ответ, установив флажок рядом с ответом. (или вы можете подождать и посмотреть, какие еще ответы будут предоставлены в первую очередь)
 – 
TheOx
4 Апр 2013 в 01:38
Хорошо, я слишком тупой, потому что все еще не могу заставить это работать. Я внес изменения, которые вы предложили, но я все еще что-то упускаю. :(
 – 
Saraswati
4 Апр 2013 в 01:45
Большое спасибо за вашу помощь! Вот ссылка: jsfiddle.net/saraswati/v6Pur/17
 – 
Saraswati
4 Апр 2013 в 06:45
Вы забыли обновить имена "date" с суффиксом, например:
 – 
TheOx
4 Апр 2013 в 17:22