Question

我有2个div彼此相邻并且有一个ADD按钮.Below是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>

单击ADD按钮，我想在数组中追加另一个<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

添加按钮并将选择名称更改为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 4

试试这个：

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

您可以使用jQuery循环遍历每个元素，并在正则表达式的帮助下增加值。你也应该从模式[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');
});

单击“添加多个选择元素”

5 个答案: