jquery - 在单击时添加多选元素

Question

我有 2 个 div 并排对齐，还有一个 ADD 按钮。下面是 html

<div class="_25">
    <label for="25">Mode</label>
    <select name="mode">
        <option value="0">Select One</option>
        <option value="fcl/fcl">FCL/FCL</option>
   </select>
</div>

单击添加按钮，我想附加另一个<select></select>具有相同名称但在数组中的元素。我尝试了各种方法，但在尝试附加它们时无济于事。例如：第一个选择元素应该有name=mode[0]，第二个mode[1]等等。

Answer 1

无需以这种方式创建名称属性，您可以将mode[]名称属性添加到您的选择元素，并且在服务器端您将拥有一个数组。但是，如果您想创建具有不同名称的选择元素，您可以尝试：

$('#add').click(function(e) {
    $('select').last().clone().prop('name', function(_, name){
        return name.replace(/\d+/, function(num) {
            return +num + 1;
        }); 
    }).appendTo('#hell');
});

http://jsfiddle.net/vSZ79/

Answer 2

您是否尝试过使用内部 html？一种方法是拥有另一个可以附加所有动态选择元素的 div。然后在 javascript 中，您可以使用 innerHTML 并为其指定样式/名称/id。

Answer 3

尝试这个 ：

 <input type="button" onclick="add_s();" value="ADD select" />

function add_s() {
        var ttl_slcts = $('._25 select').length;
        var a = "<select name=mode[" + ttl_slcts + "] ><option>a</option>     <option>b</option></select>";
        $('._25').append(a);
    }

Answer 4

添加按钮并将选择名称更改为mode[]

<div class="_25">
    <label for="25">Mode</label>
    <select name="mode[]">
        <option value="0">Select One</option>
        <option value="fcl/fcl">FCL/FCL</option>
   </select>
    <input type="button" id="add" value="ADD" />
</div>

jQuery：

$('#add').click(function() {
    var elem = $(this).closest('div').find('select:last');
    elem.clone(true).insertAfter(elem);
});

http://jsfiddle.net/samliew/FkrkH/

在服务器端，您的变量mode是一个数组。您可以使用mode[0].

Answer 5

您可以使用 jQuery 循环遍历每个元素，并在正则表达式的帮助下增加值。您还应该从 mode[0] 开始，以保​​持一致性。

$('.add').click(function(){
   var currentName = $('select:last').attr('name'); // starting name should be mode[0]
   var pattern =  /^mode\[(\d)\]$/; 
   var newName = pattern.exec(currentName)[1];
   newName++;
   newName = "mode["+newName+"]";
   $('select').attr('name', newName).appendTo('div._25');
});