在jquery中添加增加的數字來選擇重複的框名稱attr

Question

我正在從一個選擇框中獲取數量並複製該次數的div。但我遇到了一個問題。我需要新的div（包含選擇框）來更改他們的名字。我需要它將增加的數字添加到選擇框名稱的末尾。這是我的jsfiddle：http://jsfiddle.net/liveandream/DhCLK/

JQUERY：

//NUMERATE SELECT 
for (var i = 2; i < 5; i++) { // add counts in a for loop 
    $('select[name="rooms"]').append('<option value=' + i + '>' + i + '</option>'); 
} 
//# 

//DUPLICATE PLUGIN 
$.fn.duplicate = function(count, cloneEvents) { 
    var tmp = []; 
    for (var i = 0; i < count; i++) { 
     $.merge(tmp, this.clone(cloneEvents).get()); 
    } 
    return this.pushStack(tmp); 
}; 

//SELECT CHANGE FUNCTION (on change get value and clone) 
$('select[name="rooms"]').change(function(){ // on change... 
    var numOfClones = $(this).val() -1; // get value... 
    $('#holder').html('');    // empty holder if there are some old clones 
    $('.repeat').duplicate(numOfClones).addClass('new').appendTo('#holder') 
    .find("select").each(function() { 
        this.name = this.name.replace(/\d+/, 2); 
       }); 

// duplicate; fill holder with new clones; the class 'new' is just for styling 
}); 
e.preventDefault();​ 

HTML：

<select name="rooms"> 
     <option>1</option> 
</select> 

<div class="repeat"> 
    <h4 style="font-size: 11px;">Adults (17+)</h4> 
     <select name="adults"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     </select> 
    <h4 style="font-size: 11px;">Children</h4> 
     <select name="children" id="children"> 
     <option selected="selected">0</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     </select> 

     <h4 style="font-size: 11px;">Child AGES</h4> 
     <select name="ages" id="ages" style="display: none;"> 
     <option selected="selected">-?-</option> 
     <option>>0</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     <option>6</option> 
     <option>7</option> 
     <option>8</option> 
     <option>9</option> 
     <option>10</option> 
     <option>11</option> 
     <option>12</option> 
     <option>13</option> 
     <option>14</option> 
     <option>15</option> 
     <option>16</option> 
     <option>17</option> 
     </select> 
</div> 

<div id="holder"></div> 

我希望有人能夠幫助我解決這個...謝謝你在前進！

Answer 1

您可以更改克隆代碼，以便在每個重複div的每個選擇的末尾添加一個數字。您還需要修復id值，使其成爲唯一的我也添加到此代碼中。爲了在給定的重複div內爲每個選擇添加相同的數字，我必須添加另一個.each()循環，以便我們可以在正確的時間手動增加計數器。

//SELECT CHANGE FUNCTION (on change get value and clone) 
$('select[name="rooms"]').change(function(){ // on change... 
    var numOfClones = $(this).val() -1; // get value... 
    var cntr = 2; 
    $('#holder').empty();    // empty holder if there are some old clones 
    $('.repeat').duplicate(numOfClones).addClass('new').appendTo('#holder').each(function() { 
     $(this).find("select").each(function() { 
      if (this.name) { 
       this.name += cntr; 
      } 
      if (this.id) { 
       this.id += cntr; 
      } 
     }); 
     ++cntr; 
    }); 
// duplicate; fill holder with new clones; the class 'new' is just for styling 
}); 

此代碼的工作原理是因爲主副本末尾沒有編號。如果它最後有一個號碼，那麼你可以對該號碼進行替換操作。

工作演示：http://jsfiddle.net/jfriend00/hhUaR/

Answer 2

我最初的代碼不同的解決方案，但是，這似乎更優雅：

$('.repeat.new').each(function(idx) { 
    $('select', this).each(function() { 
    $(this).attr('name', $(this).attr('name') + idx).attr('id', $(this).attr('name')); 
}); 

將此放在您的更改事件處理程序。這裏有一個jsFiddle example。如果生成兩個新的div，這將給第一個div中的選擇名稱爲adults0和children0，第二個div將選擇名稱爲adults1和children1。請注意，它也將唯一名稱指定爲ID。