カスタム選択フォームを作成するには、ddslick (ページへのリンク) を使用します。
しかし、json を介してオプションを連鎖させ、Mike Tuupola による jquery 連鎖リモート スクリプトを実装したいと考えています ( Link to page )。
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 チェーン化されたリモートは何もしません。BMW のように最初の値を選択することで、2 番目の選択は値の連鎖ではありません。
コードは次のとおりです。
(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 で生成された値に変更して、連鎖スクリプトを編集しようとしました。
何も機能しません。