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

id属性必须是唯一的，因此首先只使用名称（并删除那些无效的重复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\\[\\]']");

因为我试过这段代码从textarea获取一个值到其他输入文本类型元素并且对我不起作用

$("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>

抱歉，我无法发布图片，因此我在图像和源标签之间添加空格

2使用jquery动态创建选择框

2 个答案: