Javascript 如何拥有多个下拉列表_Javascript_Php_Jquery_Html

Javascript 如何拥有多个下拉列表

javascript php jquery html

Javascript 如何拥有多个下拉列表,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我正在我的项目中设置借用事务，我需要一个多下拉列表如果按下按钮+，则会添加另一个下拉列表。我应该在哪里设置下拉列表的代码谢谢 <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

我正在我的项目中设置借用事务，我需要一个多下拉列表

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

谢谢

<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>

请尝试以下代码：

<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>

JS:

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

我猜你只是想复制整行？所以修改了你的代码。您没有任何带有toolname属性的select，因此这不起作用。另外，您没有要附加的表单，因此将其添加到html中

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

上一次，我告诉clone方法在按钮上也包含事件处理程序，这样它可以在所有行上工作，但将withDataAndEvents参数设置为true。或者，您可以使用事件委派来完成此任务

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

我建议使用on'click'，fn代替click，但它也可以与click一起使用

$document.readyfunction{ $plus.clickfunction{ var$row=$.row:first.clonetrue； $form.追加$row； }; }; .mb-3{ 显示：内联块； } 工具卷曲器烙铁量 1. 2. 3. 4. 5. 6. 7. 8. 9 10 更多 +

分享你的研究成果对每个人都有帮助。告诉我们您尝试了什么，以及为什么它不能满足您的需求。这表明你花了时间来帮助自己，它使我们避免重复显而易见的答案，最重要的是，它帮助你得到一个更具体和相关的答案！另请参见：您需要一些jquery帮助来实现这一点。您的代码中有两个下拉列表。单击加号按钮时，您希望动态添加哪个下拉列表？您希望动态添加两个下拉列表还是只添加一个？如果您希望动态添加另一个下拉列表，是什么阻止您为此编写代码？这个下拉列表的数据来自哪里？你说的其他语言是什么意思？不过，到目前为止，你为了实现自己的目标做了哪些努力？你到底被困在哪里？@daphnieandam，欢迎你，如果这个或任何其他答案回答了你的问题，那么请接受你喜欢的答案，这样其他人就可以看到你不再需要帮助了。

<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>

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

function myDiv() {
      document.body.insertAdjacentHTML( 'afterbegin', '<div>...</div>' );
}