Question

我对JQuery很陌生，这可能不是最好的学习用例，但这是我必须做的项目。

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

本质：物品清单 - ＆gt;可用尺寸 - ＆gt;显示所选尺寸的价格

这一切都非常简单，我有一些功能可用于一组分组输入。

但我仍然坚持如何让这个'N'实例工作。我正在使用元素id的索引来对相关元素进行分组（即input_name_ [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>

适用于特定id“set”的JQuery脚本（即：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是：

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

我的挑战： 1.需要删除.click事件中的特定ID，使其对所有“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

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

1 个答案: