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

和这里的JQUERY

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

从多个组合框更新文本字段

1 个答案:

会发生什么

如何