Как мне обновить поле jQuery из comboBoxes?

Question

У меня есть проект, который объединяет в одном поле формы две переменные.

1. Количество номеров
2. Количество человек в номере.

Это единственное поле будет иметь значение для каждой комнаты / человек на комнату, и каждая комната будет разделена знаком "|".

Таким образом, у вас есть 3 комнаты и 2 человека в каждой комнате = 2 | 2 | 2

Или 2 комнаты, 1 комната 2 человека и 2 комнаты 3 человека = 2 | 3

У меня есть две готовые функции jQuery:

1. Клонирование # человек и
2. Обновление значений клонированных предметов.

Проблема, с которой я столкнулся, заключается в том, что каждая функция работает независимо, и когда пользователи обновляют одно, единственное поле формы не обновляется.

Как можно объединить или обновить две функции, которые работают как одна?

Я опубликовал рабочий пример @

http://jsfiddle.net/HxsnJ/

Вот код HTML

Number of rooms<br />
<select id="itemCount" name="itemCount">
 <option selected value="1">1 item</option>
 <option value="2">2 items</option>
 <option value="3">3 items</option>
 <option value="4">4 items</option>
</select><br /><br />
Number of persons<br />
<select name="cloneElement1" id="item_dup_1" class="room">
  <option value="">Select One</option>
  <option value="1">1</option>
  <option selected value="2">2</option>
  <option value="3">3</option>
</select><br /><br />

<input type="text" name="myNumbers" value="2"> 

А вот jQuery

    // fn Clone Boxes
jQuery.fn.fieldsManage = function (number) {
    var ele = $(this);
    var clones = ele.data("clones");
    clones = clones ? clones : new Array(ele.attr("id"));
    if (clones.length < number) {
        var clone;
        while(clones.length < number) {
            clone = ele.clone(true);
            var id = clones[0]+clones.length;
            clone.attr("id", id);
            $("#"+clones[clones.length-1]).after(clone);
            clones.push(id);
        }
    } else {
        while(clones.length > number) {
            $("#"+clones.pop()).remove();
            $(function(){
                $("[name='myNumbers']").val(myNumbers.join('|'));
            });
        }
    }
    ele.data("clones", clones);
}
// Create Clone Boxes
$(document).ready(function() {
    $("#itemCount").change(function() {
        $("#item_dup_1").fieldsManage(this.value);
    });
});

// Values from Cloned Boxes
$(function(){
    $('.room').change(function(e){
        var myNumbers = [];
        $('.room').each(function(){
          myNumbers.push($(this).val());
        })
        $("[name='myNumbers']").val(myNumbers.join('|'));
    });
});

Answer 1

Ваша проблема в том, что значение не обновляется при выборе другого количества комнат?Если это так, взгляните на это http://jsfiddle.net/gSkpq/

Обратите внимание, что вы можете использовать jQuery live , чтобы привязать событие к элементам, которые могут динамически добавляться и удаляться