我使用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ä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生成的值来编辑链接脚本。
没有任何作用。