javascript - 如何有多个下拉菜单

Question

我正在我的项目中设置我的借贷交易，我需要有一个多下拉列表。

如果按下按钮 +，则会添加另一个下拉列表。我应该在哪里设置下拉菜单的代码？

谢谢...

<div class="row">
  <div class="col-md-4 mb-3">
    <label for="colFormLabel" class="col-sm col-form-label">tool</label>
    <select name= "tools" class="form-control" id="colFormLabel"required>
        <option value="">crimper</option>
        <option value="">soldering iron</option>
    </select>
  </div>
  <div class="col-md-1.2 mb-3">
    <label for="colFormLabel" class="col-sm col-form-label">quantity</label>
    <select name="qty" class="form-control" id="colFormLabel"required>
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
  </div>
  <div class="col-md-1 mb-3">
    <label for="colFormLabel" class="col-sm col-form-label">more</label>
    <button id="plus" class="plus form-control btn-outline-success" name="+" ><b>+</b></button>
  </div>
</div>

$(document).ready(function () {
  $("#plus").click(function () {
    var $tools = $("select[toolname$='tools']:first").clone();
    $("form").append("<br/>").append($tools);
  });
});

Answer 1

我删除了您 html 中的 id。因为当您克隆时，您无法克隆 ID，因为它们需要是唯一的。

我猜你只是想复制完整的行？所以改变你的代码来做到这一点。您没有使用 toolname 属性进行任何选择，因此它不起作用。此外，您没有要附加的表单，因此将其添加到 html 中。

我在选择元素的名称中添加了方括号 ([])，以便它们可以用作数组数据。

最后我告诉克隆方法在按钮上也包含事件处理程序，因此它适用于所有行，但将 withDataAndEvents 参数设置为 true。或者，您可以为此使用事件委托(delegate)。

添加了一点 CSS，因此该行实际上在代码段中显示为一行。当然，这不是代码运行所必需的。

我建议使用 on('click', fn) 而不是 click() 但它也适用于点击。

$(document).ready(function() {
  $("#plus").click(function() {
    var $row = $(".row:first").clone(true);
    $("form").append($row);
  });
});

.mb-3 {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label for="colFormLabel" class="col-sm col-form-label">tool</label>
      <select name="tools[]" class="form-control" required>
        <option value="">crimper</option>
        <option value="">soldering iron</option>
      </select>
    </div>
    <div class="col-md-1.2 mb-3">
      <label for="colFormLabel" class="col-sm col-form-label">quantity</label>
      <select name="qty[]" class="form-control" required>
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </div>
    <div class="col-md-1 mb-3">
      <label for="colFormLabel" class="col-sm col-form-label">more</label>
      <button id="plus" class="plus form-control btn-outline-success" name="+"><b>+</b></button>
    </div>
  </div>
</form>