Добавление JQuery выпадает в страницу ввода данных с переменной длиной

Question

Эй, все, я создаю форму входа, которая позволяет человеку добавить несколько дней к запросу. Каждый запрос может иметь 1 или более дней, и каждый день имеет несколько выборов, прежде чем они смогут отправить форму. Я использую Метод описан здесь Чтобы сделать это.

Теперь я хочу начать делать более продвинутые функции пользовательского интерфейса, такие как использование источника данных JSON для создания моих раскрывающихся списков с отношениями с родителями и детьми. Я до сих пор довольно новая веб-разработка (поездка из разработки IBM I зеленого экрана), поэтому я все еще изучаю примеры и с учебными пособиями. Я нашел много примеров распада родительских детей, когда есть только один набор, но мне нужно, чтобы это работало для любого количества строк и для всех новых строк, которые были добавлены на странице, при том, что я могу отображать правильное выбранное значение Для каждой строки, когда страница редактирования загружается. В довершение этого я хочу, когда сделаны определенные выборы, раскрыть некоторые новые поля.

Вот что у меня есть до сих пор:

(Это снимок экрана основан на том, чтобы не беспокоиться о конечных функциях и просто заставить его работать. Ребенок в настоящее время показывает все.)

Тип запроса выбирает тип отпуска, который вы хотите взять. Использование Тип часов получает список на основе того, что вводится в тип запроса. Проблема, с которой я столкнулся с вышеизложенным, заключается в том, чтобы заставить его работать над новыми строками, добавленными при нажатии «Добавить день». Задача заключается в том, чтобы показать/скрыть вторую строку на основе типа запроса. Если человек выбирает больных - болезнь сотрудников, должна показать природу болезни, если он выберет другой вариант, он показывает как природу болезни, так и отношения. Если они выберут отпуск, они не должны видеть ни одного поля.

У меня есть настройка JSON для этих списков. Я включил поля, которые определяют, что показывается для какой варианты.

[{"Id":11,"Title":"Employee Illness","ParentId":10,"MapToCode":"02","HasRelationship":false,"HasNatureOfIllness":true,"ChildRequired":false,"Notes":"","AccrualCode":"S"},
{"Id":1,"Title":"Vacation","ParentId":0,"MapToCode":"04","HasRelationship":false,"HasNatureOfIllness":false,"ChildRequired":false,"Notes":"","AccrualCode":"VAC"}]

Я знаю, что это очень много для новичка, чтобы учиться и выяснить. Кто -нибудь сделал это, что готово поделиться или узнать учебник или даже указывать мне в правильном направлении? (Даже правильная терминология) Мои поиски по этому поводу были провалом до сих пор.

Answer 1

У меня есть начало решения этот вопрос.

Answer 2

Лучшая вещь, которую я могу порекомендовать, возьмите общего родителя за одну строку и используйте его в качестве эталонной точки по всей остальной части строки. (Если это <tr>В таблице пометьте TR или дайте ему класс, который вы можете использовать, чтобы назвать его). Когда вам нужно изменить что -то еще в ряду, используйте .closest Чтобы найти родителя, затем перейдите к полю, которое вы хотите.

Далее, если эти данные не являются действительно динамичными, попробуйте кэшировать результаты раскрывающейся списки в локальной переменной, которую вы можете использовать с каждой новой строкой. То есть, если всегда есть одинаковые записи (полученные через AJAX) для типа запроса и типа часа, просто повторно заполните их из var request_types и var use_hours_types.

В -третьих, загляните в использование .live Поскольку это будет связываться с элементами DOM, несмотря на изменения, внесенные для него после первоначального привязки. Так что, если ваша вторая часть строки основана на выборе выпадения, используйте что -то вроде:

$('dropdown').live('change',function(){
   $(this).close('parent_object').filter('.corresponding_row').show();
});

(или какой -то факсимильный).

Не видя у вас код, просто подумайте о другом подходе к тому, как вы собираете информацию. Самое сложное в том, что вы не хотите делать широкое переосмысление каждого раскрывающегося списка с данными AJAX (предположительно), так как это повлияет на ток. Поэтому, когда это возможно, сохраняйте данные и используйте их при создании новой строки.