Добавление раскрывающихся списков jQuery на страницу ввода данных переменной длины

Question

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

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

Вот что у меня есть:

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

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

У меня есть настройка 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

Лучшая вещь, которую я могу порекомендовать, - взять общего родителя для одной строки и использовать его в качестве ориентира для остальной части строки. (если это <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 (предположительно), так как это повлияет на текущий выбор. Поэтому по возможности сохраняйте данные и используйте их при создании новой строки.

Answer 2

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