Обновить текстовое поле из нескольких полей со списком

Question

У меня проблемы с обновлением текстового поля из нескольких полей со списком с помощью jQuery. У меня есть поле разрешения, где оно будет отображать количество человек в одной комнате ... Каждая комната будет разделена знаком "|" и рассчитает количество взрослых и количество детей.

До сих пор я был в состоянии: Когда пользователь выбирает количество комнат, я клонирую поля взрослые / дети на комнату. И подсчитайте количество взрослых в комнате и поместите в одно текстовое поле.

Кто-нибудь может мне помочь добавить в это текстовое поле число взрослых и количество детей в одном числе?

ЗДЕСЬ РАБОЧИЙ ПРИМЕР http://jsfiddle.net/elation/xZMhe/

ЗДЕСЬ КОД HTML

    number of rooms<br />
<select id="itemCount" name="itemCount">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<hr />
<div id="cloneWrap1">
<!-- Clone Item Start -->
  number of persons room<br />
    Adults
  <select name="cloneElement1" id="item_dup_1" class="room">
        <option value="1">1</option>
        <option selected value="2">2</option>
        <option value="3">3</option>
    </select>
    Children
    <select class="childrenRoom">
        <option selected value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
  </div>
<!-- Clone Item End -->
<hr />
</div>
Resolution rooms | persons<br />
<input type="text" name="gsNumberOfTravelers" id="gsNumberOfTravelers" value="2"> 

И ЗДЕСЬ ЦВЕТ

// Convination Function # of rooms + # of pax //
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();
        }
    }
    ele.data("clones", clones);
}

$(document).ready(function() {
    $("#itemCount").change(function() {
        $("#cloneWrap1").fieldsManage(this.value);
        calculateNumbers();
    });
    $('.room').live('change', function(){
        calculateNumbers();
    });
});

function calculateNumbers(){
    var gsNumberOfTravelers = [];
    $('.room').each(function(){
        gsNumberOfTravelers.push($(this).val());
    });
    $("[name='gsNumberOfTravelers']").val(gsNumberOfTravelers.join('|'));
};

Спасибо!

Answer 1

Я немного изменил ваш код для HTML jQuery.

Проверьте jsFiddle , чтобы убедиться, что это то, что вы ищете.

Что происходит

Для каждой комнаты мы складываем взрослых идети и положить эту сумму в массиве.Затем этот массив помещается в текстовое поле.

Как

В основном я удалил класс room из элементов select и переместил его в клонированный div,Я сделал это, чтобы вы могли легко зациклить комнаты.Получив это, вы просто перебрали selects, который я дал классу person.

Вот соответствующий jQuery

function calculateNumbers(){
    //initialize variables
    var gsNumberOfTravelers = [];
    var total = 0;

    //loop over each room
    $('.room').each(function() {
        total = 0;

        //loop over the persons that are apart of the current room
        $(this).children('.person').each(function(){
            //add to a total
            total = total + parseInt($(this).val());
        });

        //push the total of the room to the room array
        gsNumberOfTravelers.push(total);
    });


    $("[name='gsNumberOfTravelers']").val(gsNumberOfTravelers.join('|'));
};

А вот соответствующий HTML

<div id="cloneWrap1" class="room">
<!-- Clone Item Start -->
          number of persons room<br />
            Adults
          <select name="cloneElement1" id="item_dup_1" class="person">
                <option value="1">1</option>
                <option selected value="2">2</option>
                <option value="3">3</option>
            </select>
            Children
            <select class="childrenRoom person">
                <option selected value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
          </div>