克隆表單欄位后更改單個輸入欄位的內容-有解無憂

我為我的管理員提供了一個界面，他們可以在其中向資料庫添加欄位。如果他們想添加多個欄位，他們可以輕松添加新行。這是通過 JavaScript 克隆來完成的。現在有一個下拉選單，根據下拉選單中的選擇，我想將默認值寫入 min[] 和 max[] 的文本輸入欄位。

如果我只有一條線，這很好用。但是，如果我克隆它多次并在一行中進行選擇（例如，我選擇“relative_number”選項）（例如），則每行都會更新 min 和 max 欄位。我該怎么做才能在某一行中選擇下拉選單時僅更新同一行中的最小值和最大值？

克隆表單欄位后更改單個輸入欄位的內容
這是我的代碼：

<div class="wrapper">
   <div class="entities_wrap">   
      <div class="row">
        <div class="col-md-3">
       <label>Name</label>
           <input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
        </div>
        <div class="col-md-3">
       <label>Field Name</label>
           <input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
        </div>
        <div class="col-md-2">
            <label>Category</label>
            <select id="entity_field_type[]" name="entity_field_type[]" class="form-select">                                                                 <option value=""></option>                                                 <option value="absolute_number">absolute_number</option>                                                            <option value="relative_number">relative_number</option>                                                    <option value="likert_5">likert_5</option>                                                      <option value="likert_7">likert_7</option>                                                              <option value="string">string</option>                                                       </select>
         </div>
         <div class="col-md-1 minValue">
             <label>Min</label>
             <input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
    </div>
    <div class="col-md-1">
        <label>Max</label>
        <input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
    </div>
        <div class="col-md-1" style="vertical-align: middle;">
         <label>&nbsp;</label>
         <div style="margin: 0px 10px;">
             <i class="fas fa-trash remove-item"></i></span>
         </div>
    </div>  
    <div class="col-md-1" style="vertical-align: middle;">
        <label>&nbsp;</label>
        <div style="margin: 0px 10px;">
        <i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
        </div>
    </div>
      </div><br>
    </div>
 </div>
 <script>
$(document).ready(function () {
            
$(".add-plus").click(function(){   
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});

$(".plus").click(function(){   
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});

$(".remove-item").click(function () {           
$(this).closest(".entities_wrap").remove();
});
            
});

$('select[id^="entity_field_type"]').on('change', function()
{
    var sel_cat = this.value;

    if(sel_cat == 'relative_number')
    {
        $('input[id^="min"]').val("0");
        $('input[id^="max"]').val("100");
    }
    if(sel_cat == 'absolute_number')
    {
        $('input[id^="min"]').val("0");
        $('input[id^="max"]').val("infinite");
    }
    // For the other options the code should work alike

 });
</script>

已經嘗試了不同的方法來通過 DOM 來解決它，識別父節點、兄弟節點等等，但我沒有得到它的作業。

非常感謝您的幫助！

uj5u.com熱心網友回復：

雖然您絕對應該考慮動態修改克隆輸入的名稱和 ID，但您遇到的問題與您的選擇器min和max

對于您的 javascript

  $('input[id^="min"]').val("0");
  $('input[id^="max"]').val("100");

您正在選擇所有min并max在頁面上。您需要找到相關 min的and max，這意味著找到.row選擇框的壁櫥，然后找到子 min/max

  var $row = $(this).closest("div.row");
  $row.find('input[id^="min"]').val("0");
  $row.find('input[id^="max"]').val("100");

jQuery 最接近（）

jQuery 查找（）

這是一個功能片段示例。

顯示代碼片段

$(document).ready(function() {

  $(".add-plus").click(function() {
    $(".entities_wrap:last").clone(true).appendTo(".wrapper");
  });

  $(".plus").click(function() {
    $(".entities_wrap:last").clone(true).appendTo(".wrapper");
  });

  $(".remove-item").click(function() {
    $(this).closest(".entities_wrap").remove();
  });

});

$('select[id^="entity_field_type"]').on('change', function() {
  var sel_cat = this.value;
  var $row = $(this).closest("div.row"); //find the parent row we are in.
  if (sel_cat == 'relative_number') {
    $row.find('input[id^="min"]').val("0"); //use that row to find the related min
    $row.find('input[id^="max"]').val("100"); //use that row to find the related max
  }
  if (sel_cat == 'absolute_number') {
    $row.find('input[id^="min"]').val("0");
    $row.find('input[id^="max"]').val("infinite");
  }
  // For the other options the code should work alike

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="entities_wrap">
    <div class="row">
      <div class="col-md-3">
        <label>Name</label>
        <input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
      </div>
      <div class="col-md-3">
        <label>Field Name</label>
        <input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
      </div>
      <div class="col-md-2">
        <label>Category</label>
        <select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
          <option value=""></option>
          <option value="absolute_number">absolute_number</option>
          <option value="relative_number">relative_number</option>
          <option value="likert_5">likert_5</option>
          <option value="likert_7">likert_7</option>
          <option value="string">string</option>
        </select>
      </div>
      <div class="col-md-1 minValue">
        <label>Min</label>
        <input type="text" class="form-control min" id="min[]" name="min[]" value="" />
      </div>
      <div class="col-md-1">
        <label>Max</label>
        <input type="text" class="form-control max" id="max[]" name="max[]" value="" />
      </div>
      <div class="col-md-1" style="vertical-align: middle;">
        <label>&nbsp;</label>
        <div style="margin: 0px 10px;">
          <i class="fas fa-trash remove-item"></i></span>
        </div>
      </div>
      <div class="col-md-1" style="vertical-align: middle;">
        <label>&nbsp;</label>
        <div style="margin: 0px 10px;">
          <i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
        </div>
      </div>
    </div><br>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446484.html

標籤：javascript jQuery

上一篇：從表格json資料中填充選擇元素的干凈方法

下一篇：如何在將內容分配給跨textContent之前設定一些屬性，例如空格=nowrap到從內容中提取的url