如何进行多次下拉菜单

问题描述 投票:1回答:2

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

如果按下按钮+,则添加另一个下拉列表。我应该在哪里设置下拉列表的代码?

谢谢...

<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);
  });
});
javascript php jquery html
2个回答
1
投票

我在你的HTML中删除了id。从克隆时起,您无法克隆id,因为它们必须是唯一的。

另外我猜你只想复制整行?所以改变了你的代码来做到这一点。你没有使用toolname属性的任何选择,所以这不起作用。你也没有一个表格可以附加到html上。

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

最后我告诉clone方法在按钮上包含事件处理程序,因此它可以在所有行上工作,但将withDataAndEvents参数设置为true。或者,您可以使用事件委派。

添加了一点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>

1
投票

请尝试以下代码:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="myDiv">
            <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>
        <div class="col-md-1 mb-3">
            <label for="colFormLabel" class="col-sm col-form-label">more</label>
            <button class="plus form-control btn-outline-success" name="+" ><b>+</b></button>
        </div>
    </div>
</body>
</html>
<script>
    $(".plus").click(function() {
        var html = $(".myDiv").html();
        document.body.insertAdjacentHTML( 'afterbegin', html );
        //alert(html);
    });
</script>

这是使用onClick调用特定函数的另一种方法:

HTML

<button class="plus form-control btn-outline-success" name="+" onclick="myDiv()"><b>+</b></button>

JS:

function myDiv() {
      document.body.insertAdjacentHTML( 'afterbegin', '<div>...</div>' );
}
© www.soinside.com 2019 - 2024. All rights reserved.