Как я уже сказал в своем комментарии, ваши динамически генерируемые строки не будут реагировать на изменение вашего пола, так как событие click не связано.этого можно избежать, изменив $('#selectOption1').on('change', setAnrede); на
$('table').on('change', '.genderSelect', setAnrede);
, это привязывает событие к таблице, но срабатывает только тогда, когда событие изменения соответствует элементу-потомку с классом .genderSelect (который вы теперьсначала добавьте в поле выбора;))
, вместо того, чтобы показывать / скрывать ненужные значения, я предпочитаю устанавливать параметры только тогда, когда выбран пол.Кроме того, я хотел бы, чтобы в моем коде было только место, где я определяю параметры своих полей выбора.главным образом, чтобы избежать if заявлений или ошибок из-за неправильного написания.поэтому в начале сценария я создаю объект, который я использую для заполнения параметров обоих полей выбора!
var gsAddress = {
"neutral": ["Guden", "Hallo", "Moin"],
"male": ["Sehr geehrter", "Werter", "Lieber"],
"female": ["Sehr geehrte", "Werte", "Liebe"]
};
, как я уже сказал, я хочу заполнить оба поля выбора параметрами, используянад объектом.
первое поле выбора (sexSelect) нуждается в новой функции, которая вызывается внутри функции готовности документа:
$(".genderSelect").each(prefillGenderSelect); //don't forget to add the class to the select element
function prefillGenderSelect() {
var curSelBox = this; //assign the current context to a variable
$.each(gsAddress, function(key, value) { // loop through the object, created above
var newOption = $('<option/>', {
'value': key, // the current gender where you're cycling through
'class': 'anyClass', // add any needed classes for <option>
'text': key // same again as value (but can be different)
}).appendTo(curSelBox);
})
}
, как только вы измените полSelect, setAnrede срабатывает и заполняетсяПоле выбора gsAddress с его параметрами.Моя функция setAnrede выглядит следующим образом:
function setAnrede() {
var myRow = $(this).closest("tr"); // travel up your DOM
var curSelectBox = myRow.find(".gsAddress"); //travel down your DOM and find your select Box
$(curSelectBox).find("option").remove(); //wipe out all existing options
$.each(gsAddress[$(this).val()], function(index, value) { //gs for gender specific
var newOption = $('<option/>', {
'value': value, // the current gsAdress where you're cycling through
'class': 'anyClass', // add any needed classes for <option>
'text': value // same again as value(but can be different)
}).appendTo(curSelectBox);
});
}
для вашей кнопки «добавить строку».вместо того, чтобы копировать первую строку, вы должны определить строку по умолчанию как объект и просто добавить ее в свою таблицу.это будет похоже на объект 'option', созданный ранее
var defaultRow = $("<tr/>"); //if there are attributes like class and id needed, add them like in the option declaration.
var exampleCell = $("<td/>", { //every cell needs to be defined, ofc
'class' : 'aTableCell' //if you need to add class information to the td
}
$(defaultRow).append(exampleCell); //and if it is created, append it into your row
$("#myTable").append(defaultRow); // in the end, just append the complete row to your table
Я создал рабочую скрипку.но я сократил HTML до необходимого минимума, а также реализовал простую кнопку addRow, используя функцию .clone () jquery.это было только там, чтобы видеть, работает ли это все еще на новых строках..clone () также копирует идентификаторы элементов, когда они существуют.поэтому клонирование не должно выполняться, если нужны идентификаторы ... вот ссылка: http://jsfiddle.net/sbtywfjL/