ここで、より見栄えの良い JSfiddle を作成しました。これには、予期される json 応答と、関連する JS が含まれます。
これまでのところ、json に対して ajax 呼び出しを行い、onchange をトリガーして json をマテリアル別に分割し始め、各マテリアル グループを optgroup に入れています。これはユーザーに表示されます。
最初の変更が呼び出された後に材料選択ボックスの値を設定できるようにして、最初の木材の代わりに現在の使用法が表示されるようにしたいと考えています。これを行うためにコードを修正する方法はありますか? それは私を数時間困惑させました。
Javascript:
$(document).ready(
function() {
var selectData, $states, firstRun, herp_current_material, value;
firstRun = 0;
function updateSelects() {
$('#id__material').empty();
var cities = $.map(selectData[this.value], function(city) {
m = city.split(":");
if (m.length == 3) {
value = m[1] + ":" + m[2];
value = value.toLowerCase().replace(/ /g, "_");
if (document.getElementById(m[0])) {
$('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
}
else {
if (firstRun === 0) {
console.log(m[1]);
if (m[0] == "Current") {
herp_current_material = m[1];
}
}
$('#id__material').append($("<optgroup />").attr("label", m[0]).attr("id", m[0]));
$('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
}
}
else if (m.length == 4) {
value = m[1] + ":" + m[2] + ":" + m[0];
value = value.toLowerCase().replace(/ /g, "_");
if (document.getElementById(m[0])) {
$('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
}
else {
$('#id__material').append($("<optgroup />").attr("label", m[0]).attr("id", m[0]));
$('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
}
}
else {
return true;
}
});
$("optgroup[label='Local']").insertBefore("optgroup[label='Global']");
$("optgroup[label='Current']").insertBefore("optgroup[label='Local']");
}
$.getJSON("/appdata/joinery/ajax/usage/" + return_item_uuid() + "/" + return_component_code() + "/", function(data) {
var state;
selectData = data;
$states = $('#materialwidgettypeselector').change(updateSelects);
$states.change();
if (firstRun === 0) {
$('#materialwidgettypeselector option:text="' + herp_current_material + '"').attr('selected', 'selected');
firstRun = 1;
}
});
});
HTML:
<label for="id__material">Material:</label></td><td style="font-weight:lighter; width:200px;"><select id="materialwidgettypeselector"><option value="timber">Timber</option><option value="sheet">Sheet</option><option value="door_blank">Door blank</option><option value="profiled">Profiled</option><option value="glass">Glass</option><option value="fitting">Fitting</option></select><br><select name="_material" id="id__material"><optgroup label="Local" id="Local"><option value="timber:softie">Softie</option></optgroup><optgroup label="Global" id="Global"><option value="timber:carcase">Carcase</option><option value="timber:cill">Cill</option></optgroup></select>
ジョンソン:
{"door_blank": [], "fitting": ["Frame:fitting:Bifold doors:Bifold Doors", "IEL:fitting:Bifold doors:Bifold Doors", "IEL:fitting:Sliding doors:Sliding Doors", "IER:fitting:Sliding doors:Sliding Doors", "IER:fitting:Bifold doors:Bifold Doors", "IL:fitting:Bifold doors:Bifold Doors", "IL:fitting:Sliding doors:Sliding Doors", "IML:fitting:Bifold doors:Bifold Doors", "IML:fitting:Sliding doors:Sliding Doors", "IMR:fitting:Sliding doors:Sliding Doors", "IMR:fitting:Bifold doors:Bifold Doors", "IR:fitting:Bifold doors:Bifold Doors", "IR:fitting:Sliding doors:Sliding Doors", "JL:fitting:Bifold doors:Bifold Doors", "JL:fitting:Sliding doors:Sliding Doors", "JML:fitting:Sliding doors:Sliding Doors", "JML:fitting:Bifold doors:Bifold Doors", "JMR:fitting:Sliding doors:Sliding Doors", "JMR:fitting:Bifold doors:Bifold Doors", "JR:fitting:Bifold doors:Bifold Doors", "JR:fitting:Sliding doors:Sliding Doors", "OEL:fitting:Bifold doors:Bifold Doors", "OEL:fitting:Sliding doors:Sliding Doors", "OER:fitting:Sliding doors:Sliding Doors", "OER:fitting:Bifold doors:Bifold Doors", "OHEL:fitting:Sliding doors:Sliding Doors", "OHEL:fitting:Bifold doors:Bifold Doors", "OHER:fitting:Bifold doors:Bifold Doors", "OHER:fitting:Sliding doors:Sliding Doors", "OHL:fitting:Sliding doors:Sliding Doors", "OHL:fitting:Bifold doors:Bifold Doors", "OHML:fitting:Sliding doors:Sliding Doors", "OHML:fitting:Bifold doors:Bifold Doors", "OHMR:fitting:Bifold doors:Bifold Doors", "OHMR:fitting:Sliding doors:Sliding Doors", "OHR:fitting:Bifold doors:Bifold Doors", "OHR:fitting:Sliding doors:Sliding Doors", "OL:fitting:Bifold doors:Bifold Doors", "OL:fitting:Sliding doors:Sliding Doors", "OML:fitting:Bifold doors:Bifold Doors", "OML:fitting:Sliding doors:Sliding Doors", "OMR:fitting:Bifold doors:Bifold Doors", "OMR:fitting:Sliding doors:Sliding Doors", "OR:fitting:Bifold doors:Bifold Doors", "OR:fitting:Sliding doors:Sliding Doors", "frame:fitting:Bifold doors:Bifold Doors", "frame:fitting:Sliding doors:Sliding Doors", "Global:fitting:Left", "Global:fitting:Right", "Global:fitting:Top"], "sheet": ["Global:sheet:Anti ballistic", "Global:sheet:Anti vandle steel sheet", "Global:sheet:Blue cladding", "Global:sheet:Core", "Global:sheet:Green cladding", "Global:sheet:Inner veneer", "Global:sheet:Insulation", "Global:sheet:Non specific layer", "Global:sheet:Outer veneer", "Local:sheet:Softie", "Current:sheet:"], "profiled": [], "timber": ["Global:timber:Carcase", "Global:timber:Cill", "Local:timber:Softie"]}