【问题标题】:Can't get jQuery chained ajax selects working无法让 jQuery 链式 ajax 选择工作
【发布时间】:2012-08-07 23:06:48
【问题描述】:

我正在尝试从这个 jQuery 插件中实现链式 ajax 选择:http://www.appelsiini.net/projects/chained

我正在使用远程方法。

我有一个问题,我的选择框在选择中最后显示“默认”(空白)值,如下所示:

这是一个问题,因为我有 5 个链,所以默认情况下未选择空白值时,它会执行 5 次顺序查找。它也不像演示页面上显示的那样工作,默认情况下选择默认值而不是实际值。

来自我的服务器的 JSON 请求返回:

{"":"","1":"Test #1","2":"Test #2"}

如您所见,这不是我的 JSON 返回的顺序。

这是我的 HTML:

<label class="control-label" for="branch">Branch</label>
<select id="branch" name="branch">
    <option value=""></option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
</select>
<label class="control-label" for="facility">Facility</label>
<select id="facility" name="facility">
    <option value=""></option>
</select>

<script src="/js/chained.js"></script>
<script>
    $(document).ready(function() {
        $("#facility").remoteChained("#branch", "/src/record.json.php");
    } );
</script>

所以现在我迷路了,因为我不能很好地读/写 JavaScript,我希望有人能看到这个问题并帮助我。

【问题讨论】:

    标签: javascript jquery ajax forms


    【解决方案1】:

    这是因为,

    Chrome and probably Opera sort object properties automatically

    所以您的 JSON 也按 for 循环排序。

    var json = {"":"","1":"Test #1","2":"Test #2"};
    for(var i in json)
       console.log(i);
    
    /* Result : 1 2 (null) */
    

    DEMO

    解决方案 1:

    如果您将索引更改为不会排序的字符串。

    var json = {"":"","t1":"Test #1","t2":"Test #2"};
    for(var i in json)
       console.log(i);
    
    /* Result : (null) t1 t2 */
    

    DEMO

    解决方案 2:

    更换插件

    这是编辑后的与数组一起使用的插件代码,

      /*
     * Remote Chained - jQuery AJAX(J) chained selects plugin
     *
     * Copyright (c) 2010-2011 Mika Tuupola
     *
     * Licensed under the MIT license:
     *   http://www.opensource.org/licenses/mit-license.php
     *
     */
    
    (function($) {
    
        $.fn.remoteChained = function(parent_selector, url, options) { 
    
            return this.each(function() {
    
                /* Save this to self because this changes when scope changes. */            
                var self   = this;
                var backup = $(self).clone();
    
                /* Handles maximum two parents now. */
                $(parent_selector).each(function() {
                    $(this).bind("change", function() {
    
                        /* Build data array from parents values. */
                        var data = {};
                        $(parent_selector).each(function() {
                            var id = $(this).attr("id");
                            var value = $(":selected", this).val();
                            data[id] = value;
                        });
    
                        $.getJSON(url, data, function(json) {
                            var selectedVal;
                            /* Clear the select. */
                            $("option", self).remove();
    
                            /* Add new options from json. */
                            for (var key in json.options) {
                                var k = json.options[key];
                                /* This sets the default selected. */
                                if ("selected" == k.name) {
                                    selectedVal = k.value;
                                    continue;
                                }
                                var option = $("<option />").val(k.value).append(k.name);
                                $(self).append(option);    
                            }
    
                            /* Loop option again to set selected. IE needed this... */ 
                            $(self).children().each(function() {
                                if ($(this).val() == selectedVal) {
                                    $(this).attr("selected", "selected");
                                }
                            });
    
                            /* If we have only the default value disable select. */
                            if (1 == $("option", self).size() && $(self).val() === "") {
                                $(self).attr("disabled", "disabled");
                            } else {
                                $(self).removeAttr("disabled");
                            }
    
                            /* Force updating the children. */
                            $(self).trigger("change");
    
                        });
                    });
    
                    /* Force updating the children. */
                    $(this).trigger("change");             
    
                });
            });
        };
    
        /* Alias for those who like to use more English like syntax. */
        $.fn.remoteChainedTo = $.fn.remoteChained;
    
    })(jQuery);
    

    要使用这个更新的插件,您应该使用这种 JSON 格式,

    {
        "options" : [
          { "value" : "", "name" : ""},
          { "value" : "1", "name" : "Test #1"},
          { "value" : "2", "name" : "Test #2"},
        ]
    }
    

    如果你想设置一个默认选中项(例如“Test #1”被选中),那么你可以这样做,

    {
        "options" : [
          { "value" : "", "name" : ""},
          { "value" : "1", "name" : "Test #1"},
          { "value" : "2", "name" : "Test #2"},
          { "value" : "1", "name" : "selected"}
        ]
    }
    

    如何使用这个编辑后的插件?

    只需清除/js/chained.js 中的所有代码,然后粘贴新代码即可。

    【讨论】:

    • 嗯,你似乎是对的。是否有一个值可以分配给在数字 1 之前排序的“默认”值?我真的不想在我的值前加上一个字母,因为当我进行数据库调用时,我必须使用字符串函数来删除它。
    • 或者,有没有 javascript/jquery 函数可以用来按键排序我的值?
    • @morrty,不,如果你想站在这条路上,你应该在json中发送一个数组,这样就不会在排序索引中被迭代。但当然你也必须编辑插件。
    • 编辑插件是我不知道该怎么做的部分,不幸的是。
    • @morrty,我已经为你编辑了,请再次查看我更新后的答案。
    【解决方案2】:

    服务器返回的 JSON 好像有误。

    它应该包含一个像这样的selected 字段:

    {"":"--","3-doors":"3 doors","5-doors":"5 doors","coupe":"Coupe","cabrio":"Cabrio","selected":"coupe"}
    

    取自这里的示例:

    http://www.appelsiini.net/projects/chained

    在你的情况下,服务器应该返回:

    {"":"","1":"Test #1","2":"Test #2","selected":""}
    

    【讨论】:

    • 我试了一下,它在默认值被选中时起作用,但是,默认值仍然是选择框中的最后一个而不是第一个。
    猜你喜欢
    • 1970-01-01
    • 2016-04-30
    • 1970-01-01
    • 1970-01-01
    • 2013-06-09
    • 2012-04-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多