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

我对JQuery非常陌生，这可能不是学习的最佳用例，但这是我必须做的项目

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

基本上： 项目列表->可用尺寸->显示所选尺寸的价格

这是非常直接的，我有一些功能，用于一组分组输入

但我被困在了如何使这项工作适用于'N'实例上。我正在使用元素ID上的索引对相关元素进行分组（即输入\ u name \ u[0..N]），并在整个文档中提供唯一的ID

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>

我的挑战： 1.需要删除中的特定ID。单击事件可使所有“N”字段集成为动态的 2.需要保持链的关系。（项目\u列表\u 0。单击不应影响大小\u 1选项列表）

---

我已经看过jquery.selectChain插件和jquery.cascade插件，但这两个插件似乎都不适合我的具体情况。

为您的

选择项目列表和
选择大小列表应用一个类。您将获得以下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

$（文档）.ready（函数（）{
$（“.item_list”）.change（函数（）{
//假设您只需要检索
//用于标识字段集的唯一编号。
var uniquePart=$（this.attr（'id'）.replace（/\D/g'）；
//这部分几乎没有动过
$.getJSON（url，{data}，函数（json）{
var obj=json.pl.size，
选项=['Size']；
对于（变量i=0，len=obj.length；i
这非常有帮助，可以很好地处理工作！
<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