如何在重複元素組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