2 динамически созданный флажок выбора с помощью jquery

Question

Я просто хочу создать поле выбора 2, в котором, если пользователь выбирает параметр в первом окне выбора, второй флажок выбора также выбирает это значение параметра или, скажем, поле выбора 2 должно выбрать 1 идентичный значение индекса

Select Box 1 выбирает значение индекса 2, затем выберите поле 2 также выбирает значение индекса 2 OnChange и наоборот

Вот мой код, но только 2 выберите коробки в первый ряд хорошо, если я создаю новый ряд, отсутствие эффекта

jQuery:

$("#fCVCode\\[\\]").change(function() { 
    var code = $(this).attr('value'); 
    $(this).parent().parent().find("#fCVDesc\\[\\]").val(code); 

}); 
$("#fCVDesc\\[\\]").change(function() { 
    var code = $(this).attr('value'); 
    $(this).parent().parent().find("#fCVCode\\[\\]").val(code); 

}); 

форма

<td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVCode[]" id="fCVCode[]">'; 
     $s = rand(1,99); 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Code '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
    <td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVDesc[]" id="fCVDesc[]">'; 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Desc '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 

Надеется, что вы можете помочь мне с этим.

Answer 1

id атрибуты должны быть уникальными, поэтому первое использование только имя (и удалить эти недопустимые повторяющиеся идентификаторы), а затем использовать .delegate() так:

$("#tableId").delegate("select[name='fCVCode[]']", "change", function() { 
    var code = $(this).val(); 
    $(this).closest('tr').find("select[name=fCVDesc[]").val(code); 
}).delegate("select[name='fCVDesc[]']", "change", function() { 
    var code = $(this).val(); 
    $(this).closest('tr').find("select[name=fCVCode[]").val(code); 
}); 

Когда вы делаете селектор, как $("#fCVDesc\\[\\]") он находит элементы соответствие, что селектор (ну, первый соответствие его, так как это в #id selector) и связывается с теми, не создано ни в будущем ... .delegate() будет слушать кипящее событие на <table> рабочее для новых строк, а также.

Answer 2

Я не знаю, как изменить код, который вы ответили на мою текущую структуру таблицы

Это работает, но не имеет ни малейшего представления о том, как свести к минимуму это

$("#fCVCode\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 
$("#fCVDesc\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 

$("#fCode\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 
$("#fDesc\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 

моя текущая структура таблицы выходит что-то например,

<table id="fAddCVDetails"> 
<tr> 
<th>Headers</th> 
</tr> 
<tr class="clone"> 
<td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVCode[]" id="fCVCode[]">'; 
     $s = rand(1,99); 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Code '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
    <td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVDesc[]" id="fCVDesc[]">'; 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Desc '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
</tr> 
</table> 

другой вопрос, действительно ли этот код действительно находит элемент select с указанным атрибутом имени?

find("select[name='fCVCode\\[\\]']"); 

сог Я попробовал этот код, чтобы получить значение из текстового поля к другому типу ввода текста элемента и не работает для меня

$("i m g[name=fCVNoteInsert\\[\\]]").click(function() { 
$(this).parent().parent().find("div").fadeOut(200); 
value = $(this).parent().parent().parent().find("textarea").val(); 
$(this).parent().parent().parent().find("INPUT[name='fCVLeadTime\\[\\]']").val(value); 
}); 

и форма (Примечание: структура таблицы ниже имеет 5 входов, поэтому, если я положу find («input»), все входы будут иметь одинаковые значения. И если я положу find («# fCVLeadTime»), то только первый ввод строки с id fCVLeadTime изменит значение, эта проблема будет одинаковой как моя первая размещенная проблема.)

<table id="fAddCVDetails"> <tr> <th>Headers</th> </tr> <tr> <td style="text-align: center; padding: 5px 10px 5px 5px;"><span><input type="text" id="fCVLeadTime[]" name="fCVLeadTime[]" style="width: 99%;" value="" /></span></td> 
    <div id="noteAttach[]" name="noteAttach[]" class="attachment b-all ds"> 
     <i m g s rc="imageicon" border="0" id="fCVNoteInsert[]" name="fCVNoteInsert[]" style="cursor: pointer;" title="Insert Note"> 
     <span style="float: right;"> 
     <i m g s rc="imageicon" border="0" id="fCVNoteClose[]" name="fCVNoteClose[]" style="cursor: pointer;" title="Close Window"> 
     </span> 
     <div style="padding: 5px;"></div> 
     <textarea type="file" id="note[]" name="note[]" rows="5" cols="30"></textarea> 
    </div> 
     <i m g s rc="imageicon" border="0" name="fCVNotes[]" style="cursor: pointer;" title="'.PR_FORM_DOC_TTIP_UPLOAD_NOTE.'"> 
    </td> </tr> </table> 

извините, я не могу отправлять изображения, поэтому добавляю пробелы между буквами изображения и исходными тегами