Question

我正在尝试从这个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，我希望有人能看到这个问题并帮助我。

Answer 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"},
    ]
}

如果要设置默认选定项目（例如选择“测试＃1”），那么你可以这样做，

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

如何使用此编辑过的插件？

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

Answer 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":""}

无法获取jQuery链接ajax选择工作

2 个答案:

解决方案1：

解决方案2：