1

我从一个选择框中获取金额并复制 div 的次数。但是我遇到了一个问题。我需要新的 div（包含选择框）来更改它们的名称。我需要它将递增数字添加到选择框名称的末尾。这是我的 JSFIDDLE：http: //jsfiddle.net/liveandream/DhCLK/

查询：

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

我希望有人可以帮助我...提前谢谢你！​</p>

4

2 回答 2

2

您可以更改克隆代码以在每个重复 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/

于 2012-04-17T19:20:20.227 回答
0

我最初编写了一个不同的解决方案，但这似乎更优雅：

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

将其放在您的更改事件处理程序中。这是一个jsFiddle 示例。如果生成两个新的 div，这将使第一个 div 中的选择名称为 Adult0 和 children0，而第二个 div 的选择名称为 Adult1 和 children1。请注意，它还将唯一名称分配为 ID。

于 2012-04-17T19:29:29.883 回答