Question

所以我有一个包含项目下拉列表的div。我希望用户通过按下按钮添加更多下拉列表。

我管理了这个，但我面临的问题是新列表会在按钮后附加。我希望按钮始终位于下拉列表下方。

我知道有一个名为insertBefore（）的选项，但在我的情况下，我真的不知道如何正确使用它。

哦，顺便问一下，你们有没有想过如何给每个新的下拉列表一个独特的名字？因为它是我计划稍后发送的表单。我想我需要在我的脚本文件中使用计数器，但我还不确定。

所以HTML：

<form role="form" class="contact-form" id="contact-form" method="post">
    <div class="form-group">
      ..not important for the question...
    </div>

    <div class="form-group">
       <div class="controls" id="dropdown_item">
            <select class="offerte_product" name="product_1">
                 <option value="volvo">Volvo</option>
                 <option value="saab">Saab</option>
                 <option value="opel">Opel</option>
                 <option value="audi">Audi</option>
             </select>

             <input id="add_option" type="submit" value="Add More" onclick="return false" />
        </div>
     </div>

     <div class="form-group">
      ..not important for the question...
     </div>

我使用的脚本是：

<script>
$(function(){
    $('#add_option').on('click',function(){
        var r= $('<select class="offerte_product" name="product_2"> <option value="volvo">Volvo</option> </select> ');
        $("#dropdown_item").append(r);
    });
});

所以我需要在append（r）之前的某个地方插入insertBefore吗？我真的不知道。

Answer 1

只需将按钮放在div：

之外

<div class="controls" id="dropdown_item">
    <select class="offerte_product" name="product_1">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
</div>
<input id="add_option" type="submit" value="Add More" onclick="return false" />

您可以继续追加div，按钮仍然位于其下方。

Answer 2

我为这个问题创建了小提琴。您可以根据产品组ID创建不同的名称。

$(function(){
        var productGroupID=1;
        $('#add_option').on('click',function(){
                productGroupID+=1;
            var r= $('<select class="offerte_product" name=product_'+productGroupID+'> <option value="volvo">Volvo</option> </select> ');
            $("#dropdown_item").append(r);
        });
    });

https://jsfiddle.net/ypaudyal/15jt7tLf/

但是如果您要发布到服务器，我建议您使用相同的名称并收集集合中的选定值。

如何在按钮前添加下拉列表？

2 个答案: