如何从comboBoxes更新jQuery字段?

时间:2011-12-02 21:53:15

标签: jquery forms

我有一个项目,在一个表单字段中合并两个变量。

  1. 房间数
  2. 每间客房的人数。
  3. 此唯一字段将包含每间客房/每间客房的价值,每间客房将以“|”分隔。

    所以每个房间有3个房间和2个人= 2 | 2 | 2

    或2间客房,第1间客房2人,第2间客房3人= 2 | 3

    我已准备好两个jQuery函数:

    1. 克隆#人和
    2. 更新克隆项目的值。
    3. 我遇到的问题是每个函数都独立工作,当用户更新一个时,单个表单字段不会更新。

      如何合并或更新两个作为一个函数的函数?

      我已经发布了一个工作示例@

      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('|'));
          });
      });
      

1 个答案:

答案 0 :(得分:0)

当您选择不同数量的房间时,您的问题是该值不会刷新吗?如果是这样,请查看此http://jsfiddle.net/gSkpq/

注意,您可以使用jQuery's live将事件绑定到可能动态添加和删除的元素