jquery链接选择和ddslick冲突

时间:2013-06-05 10:47:48

标签: jquery json select conflict chained

我使用ddslick(Link to page)来创建自定义选择表单。

但是我想通过json链接选项并通过Mike Tuupola(Link to page)实现jquery chainded远程脚本。

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链式遥控器没有做任何事情。通过选择第一个值,如宝马,第二个选择不是链接值。

以下是代码:

(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生成的值来编辑链接脚本。

没有任何作用。

0 个答案:

没有答案