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

Question

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

Поле выбора 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

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

Это работает, но я не знаю, как минимизировать его

$("#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 с данным атрибутом name?

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

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

$("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"), то только первый вход строки с идентификатором fCVLeadTime изменит его значение, эта проблема точно такая же, как моя первая опубликованная проблема.1017 * извините, я не могу опубликовать изображения, поэтому я добавляю пробелы между буквами изображения и тегами источника

Answer 2

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\\[\\]"), он находит элементы, соответствующие этому селектору (ну, first , соответствующий ему, так как это селектор #id ) и связывается с теми, а не любые созданные в будущем ... .delegate() будет прослушивать всплывающие события на <table>, работающем также и для новых строк.