如何在重复元素组JQuery中创建jQuery中的链式事件处理程序

Question

我对JQuery很新颖，这可能不是最好的用例，但它是我必须做的项目。

基本上我有一个表格，其中有一组输入，其中子输入的值将根据父值中的值进行更改。 （使用Ajax检索数据集）。

本质： 项目清单 - >可用尺寸 - >显示价格为所选尺寸

这都是非常简单的，我有东西给一组的分组投入运作。

但我坚持如何使这项工作'N'的实例。我使用元素标识的索引来对相关元素进行分组（即input_name_ [0..N]），并在整个文档中提供唯一标识。

的HTML：

<form ...> 
    <fieldset> 
    <select id="item_list_0" name="item_list_0"> 
     <option value=''>Select an Item</option> 
    </select> 
    <select id="size_0" name="size_0"> 
      <option value="">Select Size</option> 
    </select> 
    <input id="price_0" name="price_0" size="10" value="Unit Price" /> 
</fieldset> 

<fieldset> 
    ..... repeated with inputs named: input_name_1 
</fieldset> 
. 
. <!-- up to N --> fieldsets --> 
. 
</form> 

jQuery脚本，对于一个特定ID “设置” 工作（即：item_list_0）

<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("select#item_list_0").change(function(){ 
      $.getJSON(url,{data}, 
      function(json){ 
       var obj = json.pl.size; 
       var options = '<option value="">Size</option>'; 
       for (var i = 0; i < obj.length; i++) { 
       options += '<option value="' + i + '">' + obj[i] + '</option>'; 
       } 
       $("select#size_0").html(options); 
      }); 
      }); 

     $("select#size_0").change(function(){ 
      $.getJSON(url,{data}, 
      function(json){ 
       var price = json.pl.price; 
       var size = $("select#size_0").val(); 
       $("input#price_0").val(price[size]); 
      }); 
     }); 

    }); // end ready function 
    </script> 

作参考JSON从URL返回的：

{"pl":{"name":"item Name","price":["110.00","40.00","95.00"],"size":["LG","SM","MED"]}} 

我的挑战： 1.需要删除.click中的特定ID甚至ts对于字段集合中的所有'N'是动态的 2.需要保持链的关系。 （item_list_0.click不应该影响size_1选项列表）

我已经看过了jquery.selectChain插件和jquery.cascade插件，但似乎都不适合我的特殊情况。

Answer 1

对您的select#item_list_N和select#size_N中的每一个应用一个班级。你会得到下面的HTML：

<form> 
    <fieldset> 
     <select id="item_list_0" name="item_list_0" class="item_list"> 
      <option value=''>Select an Item</option> 
     </select> 
     <select id="size_0" name="size_0" class="size"> 
      <option value="">Select Size</option> 
     </select> 
     <input id="price_0" name="price_0" size="10" value="Unit Price" /> 
    </fieldset> 

    <fieldset> 
     <!-- repeated with inputs named: input_name_1 --> 
    </fieldset> 

    <!-- up to N fieldsets --> 

</form> 

然后，你可以使用一个通用的功能，以满足您的字段集的每一个实例。以下是我的意思的原始草案：

$(document).ready(function() { 
    $(".item_list").change(function() { 

     // Let's assume that you only need to retrieve 
     // a unique number to identify the fieldset. 
     var uniquePart = $(this).attr('id').replace(/\D/g, ''); 

     // This part left almost untouched 
     $.getJSON(url, {data}, function(json) { 
      var obj = json.pl.size, 
       options = ['<option value="">Size</option>']; 

      for (var i = 0, len = obj.length; i < len; i+= 1) { 
       options.push('<option value="' + i + '">' + obj[i] + '</option>'); 
      } 

      // Here we apply the id number 
      $("#size_" + uniquePart).html(options.join('')); 
     }); 
    }); 


    $(".size").change(function() { 
     var $this = $(this), 

      // Same idea here 
      uniquePart = $this.attr('id').replace(/\D/g, ''), 
      size = $this.val(); 

     $.getJSON(url, {data}, function(json) { 
      var price = json.pl.price, 

      // By the way, ID selectors are told 
      // to be more efficient without specifying a tag 
      $("#price_" + uniquePart).val(price[size]); 
     }); 
    }); 

}); // end ready function