添加更多名称为+ +的多个选择字段

Question

在JavaScript中我有以下功能

function addMore(){
    var html = $('.wrapper').html();
    $(".insert-after").after(html);
}

在HTML中我有以下代码

<div class="wrapper">
    <select name="s_allergies[][]" multiple required>
        <option value="none">None</option>
        <option value="Gluten">Gluten Allergy</option>
        <option value="Nut">Nut Allergy</option>
        <option value="Shellfish">Shellfish Allergy</option>
        <option value="Lactose">Lactose Allergy</option>
        <option value="Egg">Egg Allergy</option>
        <option value="Vegetarian">Vegetarian</option>
        <option value="Vegetarian with Seafood">Vegetarian/Seafood</option>
        <option value="No Pork">No Pork</option>
        <option value="No Red Meat">No Red Meat</option>
    </select>
</div>

在我的应用程序中，我有一个“添加更多”按钮，将复制和粘贴字段。为了让我通过php处理它们我需要一种方法来将选择字段的名称增加为“s_allergies [1] [] .... s_allergies [2] []”等等。但是，我不能似乎可以使用它

我不是javascript的专业人士，有人可以指导我一点吗？

谢谢

https://codepen.io/anon/pen/baqNKx

Answer 1

首先，你需要为你的select定义一个ID，如果你有多个，那么这就是你需要在普通JS中做的事情

function addMore(){
  child=document.createElement('option');
  child.text='Some Text';
  child.val='some Value';
  document.getElementById('selector').appendChild(child);
}

<div class="wrapper">
    <select id="selector" name="s_allergies[][]" multiple required>
        <option value="none">None</option>
        <option value="Gluten">Gluten Allergy</option>
        <option value="Nut">Nut Allergy</option>
        <option value="Shellfish">Shellfish Allergy</option>
        <option value="Lactose">Lactose Allergy</option>
        <option value="Egg">Egg Allergy</option>
        <option value="Vegetarian">Vegetarian</option>
        <option value="Vegetarian with Seafood">Vegetarian/Seafood</option>
        <option value="No Pork">No Pork</option>
        <option value="No Red Meat">No Red Meat</option>
    </select>
    <button onClick=addMore()>Click</button>
</div>

这使用jQuery：

function addMore(){
  $('#selector').append($('<option value="someValue">Some Text</option>'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <select id="selector" name="s_allergies[][]" multiple required>
        <option value="none">None</option>
        <option value="Gluten">Gluten Allergy</option>
        <option value="Nut">Nut Allergy</option>
        <option value="Shellfish">Shellfish Allergy</option>
        <option value="Lactose">Lactose Allergy</option>
        <option value="Egg">Egg Allergy</option>
        <option value="Vegetarian">Vegetarian</option>
        <option value="Vegetarian with Seafood">Vegetarian/Seafood</option>
        <option value="No Pork">No Pork</option>
        <option value="No Red Meat">No Red Meat</option>
    </select>
    <button onClick=addMore()>Click</button>
</div>