Adding incrementing numbers to select box name attr on duplication in jquery

Question

I am taking the amount from one select box and duplicating a div that number of times. But I have run into a problem. I need the new divs (which contain select boxes) to change their name. I need it to add the incrementing number to the end of the select box name. Here is my 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>

I hope someone could help me with this... Thank you in advance!

jfriend00 · Accepted Answer · 2012-04-17T19:25:49.163

You can change the clone code to add a number to the end of each select in each repeat div. You also need to fix the id values to be unique which I added to this code too. To get the same number added to each select within a given repeat div, I had to add another .each() loop so we could manually increment the counter at the right time.

//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
});

This code works because the master copy has no number at the end. If it did have a number at the end, then you could do a replace operation on that number.

Working demo: http://jsfiddle.net/jfriend00/hhUaR/

j08691 · Answer 2 · 2012-04-17T19:38:54.000

I originally coded a different solution but this seems more elegant:

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

Place this in your change event handler. Here's a jsFiddle example. If generating two new divs, this would give the selects in the first div the name adults0 and children0, and the second div would have selects name adults1 and children1. Note that it also assigns the unique name as the ID.

Adding incrementing numbers to select box name attr on duplication in jquery

2 Answers2