更改更改选择选项上动态添加的输入值

Question

我正在使用通过 jquery 设置的添加删除输入字段。

我想根据该字段集中选择的选项来设置输入的输入值。

如何实现这一目标？

代码：

var html = '<tr><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></td><td><input name="membership_number[]"></td></tr>';

var max = 50;
var x = 1;

$('#add_row').click(function() {
  if (x <= max) {
    $('#table_fields').append(html_row);
    var els = $(".firstcell");
    for (var i = 1; i < els.length; i++) {
      els[i].innerHTML = i + 1;

      $("select[name='is_member[]']']").on('change', function(e) {
        var member_status = $(this).val();
        if (member_status == 'No') {
          $("input[name='membership_number[]']").val("Not Member");
        } else {
          $("input[name='membership_number[]']").val("");
        }
      });
    }
  }
});

$('#table_fields').on('click', '#remove_row', function() {
  $(this).closest('.mybox').remove();
  x--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

使用此代码，

membership_number

字段的值会发生更改，但字段集输入字段的所有添加行都会发生更改。

我只想更改它仅针对添加行中设置的特定字段的选择选项。

JSFIDDLE

在 jsfiddle 中，您可以通过添加行并将成员选项更改为“否”来进行检查...会员编号中的所有输入字段值都会更改...

Answer 1

您正在使用以下内容来更新输入：

$("input[name='membership_number[]']").val("Not Member");

此 css 选择器将匹配任何输入，与当前行无关。

---

既然您有更改

event

，为什么 nog 使用该事件来获取父级（行），然后在该行中查找输入：

$("select[name='is_member[]']").on('change', function() {
    var member_status=$(this).val();
    var matching_input = this.parentNode.parentNode.querySelector('input');
    matching_input.value = (member_status=="No")
        ? "Not Member"
        : "";          
});   

---

完整片段演示：

var html_row = '<tr><td class="firstcell"></td><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td><td><input name="membership_number[]" value=""></td><td><input type="button" name="remove" id="remove_row" class="btn btn-info"  value="Remove This Section" tabindex="-1"></td></tr>';

var max = 50;
    var x = 1;
    
    $('#add_row').click(function(){
        if(x <= max){
            $('#table_fields').append(html_row);  
            var els = $(".firstcell");
                for (var i = 1; i < els.length; i++) {
                    els[i].innerHTML = i+1;
                 $("select[name='is_member[]']").on('change', function() {
                    var member_status=$(this).val();
                    var matching_input = this.parentNode.parentNode.querySelector('input');
                    matching_input.value = (member_status=="No")
                        ? "Not Member"
                        : "";          
                });             
         }    
         }
        });           
    

    $('#table_fields').on('click', '#remove_row', function(){
        $(this).closest('tr').remove();
        x--;
    });
    
    
     
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="table_fields">
<tr>
  <td></td>
  <td>Is Member</td>
  <td>Membership Number</td>
</tr>

<tr>
<td class="firstcell">1</td>
<td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td>
<td><input name="membership_number[]" value=""></td>
<td></td>
</tr>
</table>
<br><br>
<div class="text-center"><input type="button" name="add" id="add_row" class="btn btn-primary"  value="Add Input Row" tabindex="-2"> </div>