1

我使用 ddslick（链接到页面）来创建自定义选择表单。

但我想通过 json 链接选项并由 Mike Tuupola 实现 jquery 链接远程脚本（链接到页面）。

ddslick 创建自定义表单，如下所示：

<div id="model" class="dd-container" style="width: 194px; ">
    <div class="dd-select" style="width: 194px; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial; ">
        <input class="dd-selected-value" type="hidden" value="tet">
        <a class="dd-selected">
            <label class="dd-selected-text">1. Marke wählen:</label>
        </a>
        <span class="dd-pointer dd-pointer-down"></span>
    </div>

    <ul class="dd-options dd-click-off-close" style="width: 194px; ">
        <li>
            <a class="dd-option dd-option-selected"> 
                <input class="dd-option-value" type="hidden" rel="undefined" value="tet" name="model"> 
                <label class="dd-option-text">1. Marke wählen:</label>
            </a>
        </li>
        <li>
            <a class="dd-option"> 
                <input class="dd-option-value" type="hidden" rel="undefined" value="bmw" name="model"> 
                <label class="dd-option-text">BMW</label>
            </a>
        </li>
        <li>
            <a class="dd-option"> 
                <input class="dd-option-value" type="hidden" rel="undefined" value="audi" name="model"> 
                <label class="dd-option-text">Audi</label>
            </a>
       </li>
   </ul>
</div>

原始代码如下所示：

<select id="model" name="model"> 
    <option value="tet">1. Marke w&auml;hlen:</option> 
    <option value="bmw">BMW</option> 
    <option value="audi">Audi</option> 
</select>

ddslick 工作正常！

但是 jquery 链式远程不做任何事情。通过选择第一个值，如 BMW，第二个选择不是链接值。

这是代码：

(function($) {
"use strict";

$.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) {
                    /* If select already had something selected, preserve it. */
                    var selected_key = $(':selected', self).val();

                    /* Clear the select. */
                    $("option", self).remove();

                    var option_list = [];
                    if ($.isArray(json)) {
                        /* JSON is already an array (which preserves the ordering of options) */
                        /* [["","--"],["series-1","1 series"],["series-3","3 series"]] */
                        option_list = json;
                    } else {
                        /* JSON is an JavaScript object. Rebuild it as an array. */
                        /* {"":"--","series-1":"1 series","series-3":"3 series"} */
                        for (var key in json) {
                            if (json.hasOwnProperty(key)) {
                                option_list.push([key, json[key]]);
                            }
                        }
                    }

                    /* Add new options from json. */
                    for (var i=0; i!==option_list.length; i++) {
                        var key = option_list[i][0];
                        var value = option_list[i][1];

                        /* Set the selected option from JSON. */
                        if ("selected" === key) {
                            selected_key = value;
                            continue;
                        }
                        var option = $("<option />").val(key).append(value);
                        $(self).append(option);
                    }

                    /* Loop option again to set selected. IE needed this... */
                    $(self).children().each(function() {
                        if ($(this).val() === selected_key) {
                            $(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);

我已经在准备好的文档上集成了两个脚本，并且我还尝试通过将所有需要的类结束元素更改为 ddslick 生成的值来编辑链式脚本。

没有任何效果。

4

0 回答 0