Question

我正在使用依赖下拉选择哪个工作正常，但我希望它们在一个表中，以便根据需要添加更多行。

我遇到的问题是我使用类来选择下拉列表，因此选项会添加到所有下拉列表中，而不仅仅是当前行。

$(".quote_product").append(option);

主要罪犯和我一直在尝试使用：

$(this).closest('tr').find(".quote_product").append(option);

但这导致空白输出。

我的另一个想法是使用表格行示例＃quote_product_1等来应用ID，但是当我尝试时，我一直得到索引（-1）。

HTML如下： `

<tr>
  <td>1</td>
  <td>
    <select class="form-control quote_category">
      <option value="">--Select--</option>
    </select>
  </td>
  <td>
    <select class="form-control quote_product">
      <option value="">--Select--</option>
    </select>
  </td>
  <td>
  <input type="input" name="quote_width" class="form-control quote_width" id="" placeholder="0.00" disabled="" />
  </td>
  <td>
  <input type="input" name="quote_qty" class="form-control quote_qty" id="" placeholder="1.00" />
  </td>
</tr>


<tr>
  <td>2</td>
  <td>
    <select class="form-control quote_category">
      <option value="">--Select--</option>
    </select>
  </td>
  <td>
    <select class="form-control quote_product">
      <option value="">--Select--</option>
    </select>
  </td>
  <td>
  <input type="input" name="quote_width" class="form-control quote_width" id="" placeholder="0.00" disabled="" />
  </td>
  <td>
  <input type="input" name="quote_qty" class="form-control quote_qty" id="" placeholder="1.00" />
  </td>
</tr>


<tr>
  <td>3</td>
  <td>
    <select class="form-control quote_category">
      <option value="">--Select--</option>
    </select>
  </td>
  <td>
    <select class="form-control quote_product">
      <option value="">--Select--</option>
    </select>
  </td>
  <td>
  <input type="input" name="quote_width" class="form-control quote_width" id="" placeholder="0.00" disabled="" />
  </td>
  <td>
  <input type="input" name="quote_qty" class="form-control quote_qty" id="" placeholder="1.00" />
  </td>
</tr>

Answer 1

如果您尝试定位特定的下拉列表，我相信您必须使用交叉点选择例如：

$(this).closest('tr').find('.form-control.quote_product').append(option);

Answer 2

您尚未提供或告诉我们有关触发添加新选项的机制，因此无法获得完整答案。

但看起来它和你要添加它的选择在同一个tr中？如果是这样，您的$(this).closest('tr').find(".quote_product").append(将会正常运作。

这是一个演示，当您单击任何最右侧的文本框时，会向当前行添加一个选项。您只需要将事件重新连接到按钮或您在该行中放置的任何内容。

$(".quote_qty").on("click", function(){
    $(this).closest('tr').find(".quote_product").append('<option value="3">added option</option>');
});

仅在此行中选择类 - Jquery

2 个答案: