1

1つの選択ボックスから金額を取得し、その回数だけ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>

誰かがこれを手伝ってくれることを願っています...よろしくお願いします！</ 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の例です。2つの新しいdivを生成する場合、これにより、最初のdivのselectにadults0とchildren0という名前が付けられ、2番目のdivにはadults1とchildren1という名前のselectが付けられます。IDとして一意の名前も割り当てられることに注意してください。

于 2012-04-17T19:29:29.883 に答える