gpt4 book ai didi

jquery - 使用 jQuery 进行级联下拉的 3 级嵌套对象 - 第三级不起作用

转载 作者:行者123 更新时间:2023-12-01 08:33:06 25 4
gpt4 key购买 nike

我正在从 3 级嵌套对象创建级联下拉列表。我无法使第三级工作,我的尝试在最后进行了评论。

$(document).ready(function() {
var carsdata = {
"ALFA ROMEO": {
"147": ["1,6 TS", "1,9 JTD", "1,9 JTD 16V MULTIJET", "1,9 JTD 120", "2,0 TS"],
"156": ["1,9 JTD", "1,9 JTD 16V MULTIJET", "2,4 JTD"],
"159": ["1,9 JTDM", "2,4 JTDM"],
"159 SW": ["1,9 JTDM", "2,4 JTDM"],
"166": ["2,0 TWIN SPARK 16V", "2,4 JTD", "2,0 TS"],
"GIULIA": ["2,9 V6 BI-TURBO", "2,2 JTD", "2,2 JTDM"],
"GIULIETTA": ["1,6 D. N. A", "2,0 D. N. A", "1,6", "2,0 TCT", "1,4 TB 16V D. N. A", "2,0", "1,6 MULTIJET", "1,4 TB"],
"GT": ["1,9 JTD M-JET"],
"GTV": ["2,0 TWIN SPARK 16V"],
"MITO": ["1,6 JTDM", "1,4 T-JET", "1,4 TB", "1,3 JTDM", "1,4", "1,4 T-JET SPORT", "1,3"],
"STELVIO": ["2,2 DIESEL", "2,0 TURBO"]
},
"AUDI": {
"80": ["1,9 TDI", "2.0", "1,6"],
"A1": ["1,6 TDI", "1,0 TFSI", "2,0 TDI", "1,4 TFSI", "1,2 TFSI", "1,6 TDI S-TRONIC", "1,4 TDI"],
"A2": ["1,4 TDI", "1,4"],
"A3": ["2,0 TDI", "1,6 TDI SPORT", "1,6 TDI", "1,9 TDI", "1,6", "1,6 TDI S-TRONIC", "2,0 TDI SPORT S-TRONIC", "1,8 TFSI", "2,0 TDI S-TRONIC", "1,2 TFSI", "1,8", "1.6 TDI", "1,4 TFSI", "2,0 TDI SPORT", "35 TDI", "2,0 FSI", "1", "1,8 T", "30 TDI", "35 TFSI", "A3 LIMOUSINE 1,6 TDI S TRONIC", "1,0 TFSI"],
"A3 CABRIO": ["1,6 TDI", "2,0 TDI", "1,9 TDI", "1,8 TFSI"],
"A3 COUPE": ["1.6 TDI", "1,6", "2.0 TDI"],
"A4": ["2,0 TDI SPORT", "2,0 TDI", "QUATTRO 3,0 TDI TIPTRONIC", "1,9 TDI", "3,0 TDI S-TRONIC", "1,8 T", "1,6", "3,0 TDI", "35 TDI", "2,0 TDI S-TRONIC", "3.0 TDI", "1,8 TFSI", "2,0 TFSI", "2,5 V6 TDI", "2.0 TDI", "2,0", "1,8", "1.9 TDI", "2,7 TDI", "2.0 TDI QUATTRO", "3,0 V6 TDI"],
"A4 ALLROAD": ["3,0 TDI", "2,0 TDI", "2,0 TDI S-TRONIC", "2"],
"A4 AVANT": ["1,9 TDI", "2,0 TDI", "2,0 TDI SPORT", "2,0 TDI S-TRONIC", "2,5 V6 TDI", "2,0 TDIE", "2,0", "2,0 SPORT", "2.0 TDI QUATTRO", "2,7 TDI", "2,0 TFSI", "QUATTRO 3,0 TDI TIPTRONIC", "3,0 TDI", "3.0 TDI", "3,0 V6 TDI", "2,7 V6 TDI", "2.0 TDI", "3", "3,0 TDI S-TRONIC"],
"A4 CABRIO": ["2,5 TDI", "1,8 T", "1,8"],
"A5 CABRIO": ["2,0 TDI", "3,0 TDI S-TRONIC", "2,7 TDI", "3,0 TDI"],
"A5 COUPE": ["3.0 TDI QUATTRO", "2,0 TDI SPORT", "1,8 TFSI", "2,0 TDI", "2,7 TDI", "3.0 TDI", "3,0 TDI SPORT S-TRONIC", "3,0 TDI", "3,0 TDI S-TRONIC", "2,0 TDI S-TRONIC"],
"A5 SPORTBACK": ["2,0 TDI", "2,0 TDI SPORT S-TRONIC", "3,0 TDI", "2,0 TDI S-TRONIC", "2,0 TDI SPORT", "2,7 TDI", "3,0 TDI S-TRONIC", "3,0 TDI SPORT S-TRONIC", "40 TDI", "2.0 TDI", "1,8 TFSI", "3.0 TDI QUATTRO"],
"A6": ["3,0 V6 TDI", "2,0 TDI", "2,7 V6 TDI", "3,0 TDI", "3,0 TDI S-TRONIC", "1,9 TDI", "2,8 V6", "50 TDI", "2,5 V6 TDI", "2,4 V6", "3,0 V6", "3,2 FSI V6", "40 TDI", "3.0 TDI", "1,8", "2,0 TDI S-TRONIC", "2,5 TDI", "A6 3,0 TDI QUATTRO S-TRONIC", "3", "2.0 TDI", "3.0 TDI QUATTRO", "OSOBNO"],
"A6 ALLROAD": ["3,0 TDI", "3,0 V6 TDI", "3,0 TDI S-TRONIC", "2,5 TDI", "3.0 TDI"],
"A6 AVANT": ["2,0 TDI", "3,0 TDI", "3,0 TDI S-TRONIC", "1,9 TDI", "3.0 TDI", "3,0 V6 TDI", "3,2 FSI V6", "2,5 V6 TDI", "2,7 V6 TDI", "2,4 V6", "2,5 TDI", "3.0 TDI QUATTRO", "2,0 TDI S-TRONIC", "40 TDI", "1,8 T", "50 TDI"],
"A7": ["3,0 TDI S-TRONIC", "3,0 TDI", "50 TDI", "3.0 TDI"],
"A8": ["4,2 V8", "3,0 TDI", "4,0 V8 TDI", "4,2 TDI", "OSOBNO", "3,0 V6 TDI", "50 TDI", "3.0 TDI"],
"Q2": ["30 TDI", "1,6 TDI", "1,4 TFSI", "2,0 TDI", "OSOBNO", "1.6 TDI"],
"Q3": ["2,0 TDI S-TRONIC", "2,0 TDI", "2,0 TDI SPORT", "35 TDI", "35 TFSI", "2.0 TDI"],
"Q5": ["Q5 2,0 TDI S-TRONIC", "2,0 TDI S-TRONIC", "3,0 TDI S-TRONIC", "2,0 TDI", "SQ5 3,0 TDI", "2,0 TDI SPORT", "40 TDI", "3,0 TDI", "35 TDI", "2.0 TDI", "2.0 TDI QUATTRO", "50 TDI"],
"Q7": ["3,0 V6 TDI", "3,0 TDI", "3.0 TDI", "50 TDI"],
"Q8": ["50 TDI"],
"TT": ["2,0 TDI", "2,0 TFSI", "2.0 TDI QUATTRO", "1,8 T", "1,8 TFSI", "3,2 V6"]
},
"BMW": {
"I3": ["AUT.", "REX"],
"M4": ["M4", "CABRIO"],
"SERIJA 1": ["116D SPORT", "116D", "120D", "114D", "116I", "118D", "118D SPORT", "118I", "16D", "123D"],
"SERIJA 2": ["220D", "218D", "216D", "218I"],
"SERIJA 2 ACTIVE TOURER": ["218D", "216D", "218I", "220D"],
"SERIJA 2 GRAN TOURER": ["218D", "216D", "220D"],
"SERIJA 3": ["318D", "320D", "325D", "316D", "330XD", "320D SPORT", "320D M SPORT", "330D", "318I", "318D SPORT", "316I", "2.0D", "320I", "320XD", "18D"],
"SERIJA 3 CABRIOLET": ["320CD", "320D", "330CI", "335I", "330D", "320I", "320CI"],
"SERIJA 3 COMPACT": ["320TD", "316I"],
"SERIJA 3 COUPE": ["320CD", "320D", "320CI", "318CI", "320I", "330CD", "330D", "335I", "330CI"],
"SERIJA 3 GRAN TURISMO": ["320D", "318D", "1,8", "DIESEL"],
"SERIJA 3 TOURING": ["320D", "316D", "330D", "318D", "18D", "325D", "316I", "330XD", "335I", "320I"],
"SERIJA 4 COUPE": ["420D", "420D SPORT", "430D", "435D M SPORT", "420D M SPORT", "418D", "M4"],
"SERIJA 4 GRAN COUPE": ["418D SPORT", "418D", "420D", "420D SPORT", "420D M SPORT", "430D", "435D M SPORT"],
"SERIJA 5": ["520D", "530D", "530XD", "525D", "523I", "520D ALL-IN-5", "530I", "520D ALL-IN-5M", "525TDS", "518D", "520I", "535D", "525I", "525XD", "535XD", "540I", "20D", "25D"],
"SERIJA 5 GRAN TURISMO": ["30D", "535D", "530D", "520D"],
"SERIJA 5 TOURING": ["520D", "525D", "518D", "530D", "525XD", "530XD", "535D", "30D", "535XD", "530I"],
"SERIJA 6": ["640D", "645CI"],
"SERIJA 6 GRAN COUPE": ["640D"],
"SERIJA 7": ["730D", "740D", "750LI"],
"X1": ["20D", "XDRIVE20D", "18D", "XDRIVE18D", "SDRIVE18D", "SDRIVE20D", "SDRIVE16D", "16D", "2,0 D", "25D"],
"X2": ["SDRIVE18D", "XDRIVE20D"],
"X3": ["XDRIVE30D", "XDRIVE20D", "2,0 D", "XDRIVE35D", "3,0 D", "20D", "18D", "30D", "3,0 I", "SDRIVE18D", "3,0 SD", "2,0 I"],
"X4": ["20D", "30D", "XDRIVE20D", "2.0D"],
"X5": ["XDRIVE30D", "3,0 I", "XDRIVE40D", "XDRIVE35D", "3,0 D", "25D", "4,8 I", "30D", "M50D", "3,0 SD"],
"X6": ["40D", "35D", "30D SPORT", "35I", "30D", "M50D", "XDRIVE30D", "XDRIVE40D"]
}
};
var manufacturer = $('<select id="manufacturer"></select>');
var model = $('<select id="model"> </select>');
var type = $('<select id="type"> </select>');
$.each(carsdata, function(item, key) {
manufacturer.append('<option >' + item + '</option>');
});
$("#container").html(manufacturer);

$("#manufacturer").on("change", function(e) {
var item;
var selected = $(this).val();
if (selected === "ALFA ROMEO") {
item = carsdata[selected];
} else {
item = carsdata[selected];
}
$(model).html('');
$.each(item, function(item, key) {
model.append('<option>' + item + '</option>');
$("#container").append(model);
});
});
<!-- 3rd level is not working, this is my attempt: -->
<!-- $("#model").on("change", function(e) { -->
<!-- var item; -->
<!-- var selected = $(this).val(); -->
<!-- if (selected === "147") { -->
<!-- item = carsdata[selected]; -->
<!-- } else { -->
<!-- item = carsdata[selected]; -->
<!-- } -->
<!-- $(type).html(''); -->
<!-- $.each(item, function(item, key) { -->
<!-- type.append('<option>' + key + '</option>'); -->
<!-- $("#container").append(type); -->

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container"></div>

最佳答案

选择类型的模式与您为制造商所做的相同,但是您需要使用委托(delegate)事件处理程序,因为当页面打开时 DOM 中不存在 #model 元素负载。

但是您应该注意,当您在选择型号和类型后多次更改制造商选择时,在选择选项时将不同的选择附加到 DOM 的行为会完全破坏 UI。要解决此问题,请首先在 DOM 中保留所有选择,但隐藏不需要的选择,直到选择一个选项。试试这个:

var $manufacturer = $('<select id="manufacturer"></select>').appendTo('#container');
var $model = $('<select id="model"></select>').appendTo('#container');
var $type = $('<select id="type"></select>').appendTo('#container');

var manuHtml = Object.keys(carsdata).map(k => `<option>${k}</option>`).join('');
$manufacturer.html('<option>Please select...</option>' + manuHtml);

$("#manufacturer").on("change", function() {
var manufacturer = $(this).val();
var modelHtml = Object.keys(carsdata[manufacturer]).map(k => `<option>${k}</option>`).join('');
$model.html('<option>Please select...</option>' + modelHtml).show();
$type.val('').empty().hide();
});

$(document).on('change', '#model', function() {
var manufacturer = $('#manufacturer').val();
var model = $(this).val();
var typeHtml = carsdata[manufacturer][model].map(v => `<option>${v}</option>`).join('');
$type.html('<option>Please select...</option>' + typeHtml).show();
});

$(document).ready(function() {
var carsdata = {
"ALFA ROMEO": {
"147": ["1,6 TS", "1,9 JTD", "1,9 JTD 16V MULTIJET", "1,9 JTD 120", "2,0 TS"],
"156": ["1,9 JTD", "1,9 JTD 16V MULTIJET", "2,4 JTD"],
"159": ["1,9 JTDM", "2,4 JTDM"],
"159 SW": ["1,9 JTDM", "2,4 JTDM"],
"166": ["2,0 TWIN SPARK 16V", "2,4 JTD", "2,0 TS"],
"GIULIA": ["2,9 V6 BI-TURBO", "2,2 JTD", "2,2 JTDM"],
"GIULIETTA": ["1,6 D. N. A", "2,0 D. N. A", "1,6", "2,0 TCT", "1,4 TB 16V D. N. A", "2,0", "1,6 MULTIJET", "1,4 TB"],
"GT": ["1,9 JTD M-JET"],
"GTV": ["2,0 TWIN SPARK 16V"],
"MITO": ["1,6 JTDM", "1,4 T-JET", "1,4 TB", "1,3 JTDM", "1,4", "1,4 T-JET SPORT", "1,3"],
"STELVIO": ["2,2 DIESEL", "2,0 TURBO"]
},
"AUDI": {
"80": ["1,9 TDI", "2.0", "1,6"],
"A1": ["1,6 TDI", "1,0 TFSI", "2,0 TDI", "1,4 TFSI", "1,2 TFSI", "1,6 TDI S-TRONIC", "1,4 TDI"],
"A2": ["1,4 TDI", "1,4"],
"A3": ["2,0 TDI", "1,6 TDI SPORT", "1,6 TDI", "1,9 TDI", "1,6", "1,6 TDI S-TRONIC", "2,0 TDI SPORT S-TRONIC", "1,8 TFSI", "2,0 TDI S-TRONIC", "1,2 TFSI", "1,8", "1.6 TDI", "1,4 TFSI", "2,0 TDI SPORT", "35 TDI", "2,0 FSI", "1", "1,8 T", "30 TDI", "35 TFSI", "A3 LIMOUSINE 1,6 TDI S TRONIC", "1,0 TFSI"],
"A3 CABRIO": ["1,6 TDI", "2,0 TDI", "1,9 TDI", "1,8 TFSI"],
"A3 COUPE": ["1.6 TDI", "1,6", "2.0 TDI"],
"A4": ["2,0 TDI SPORT", "2,0 TDI", "QUATTRO 3,0 TDI TIPTRONIC", "1,9 TDI", "3,0 TDI S-TRONIC", "1,8 T", "1,6", "3,0 TDI", "35 TDI", "2,0 TDI S-TRONIC", "3.0 TDI", "1,8 TFSI", "2,0 TFSI", "2,5 V6 TDI", "2.0 TDI", "2,0", "1,8", "1.9 TDI", "2,7 TDI", "2.0 TDI QUATTRO", "3,0 V6 TDI"],
"A4 ALLROAD": ["3,0 TDI", "2,0 TDI", "2,0 TDI S-TRONIC", "2"],
"A4 AVANT": ["1,9 TDI", "2,0 TDI", "2,0 TDI SPORT", "2,0 TDI S-TRONIC", "2,5 V6 TDI", "2,0 TDIE", "2,0", "2,0 SPORT", "2.0 TDI QUATTRO", "2,7 TDI", "2,0 TFSI", "QUATTRO 3,0 TDI TIPTRONIC", "3,0 TDI", "3.0 TDI", "3,0 V6 TDI", "2,7 V6 TDI", "2.0 TDI", "3", "3,0 TDI S-TRONIC"],
"A4 CABRIO": ["2,5 TDI", "1,8 T", "1,8"],
"A5 CABRIO": ["2,0 TDI", "3,0 TDI S-TRONIC", "2,7 TDI", "3,0 TDI"],
"A5 COUPE": ["3.0 TDI QUATTRO", "2,0 TDI SPORT", "1,8 TFSI", "2,0 TDI", "2,7 TDI", "3.0 TDI", "3,0 TDI SPORT S-TRONIC", "3,0 TDI", "3,0 TDI S-TRONIC", "2,0 TDI S-TRONIC"],
"A5 SPORTBACK": ["2,0 TDI", "2,0 TDI SPORT S-TRONIC", "3,0 TDI", "2,0 TDI S-TRONIC", "2,0 TDI SPORT", "2,7 TDI", "3,0 TDI S-TRONIC", "3,0 TDI SPORT S-TRONIC", "40 TDI", "2.0 TDI", "1,8 TFSI", "3.0 TDI QUATTRO"],
"A6": ["3,0 V6 TDI", "2,0 TDI", "2,7 V6 TDI", "3,0 TDI", "3,0 TDI S-TRONIC", "1,9 TDI", "2,8 V6", "50 TDI", "2,5 V6 TDI", "2,4 V6", "3,0 V6", "3,2 FSI V6", "40 TDI", "3.0 TDI", "1,8", "2,0 TDI S-TRONIC", "2,5 TDI", "A6 3,0 TDI QUATTRO S-TRONIC", "3", "2.0 TDI", "3.0 TDI QUATTRO", "OSOBNO"],
"A6 ALLROAD": ["3,0 TDI", "3,0 V6 TDI", "3,0 TDI S-TRONIC", "2,5 TDI", "3.0 TDI"],
"A6 AVANT": ["2,0 TDI", "3,0 TDI", "3,0 TDI S-TRONIC", "1,9 TDI", "3.0 TDI", "3,0 V6 TDI", "3,2 FSI V6", "2,5 V6 TDI", "2,7 V6 TDI", "2,4 V6", "2,5 TDI", "3.0 TDI QUATTRO", "2,0 TDI S-TRONIC", "40 TDI", "1,8 T", "50 TDI"],
"A7": ["3,0 TDI S-TRONIC", "3,0 TDI", "50 TDI", "3.0 TDI"],
"A8": ["4,2 V8", "3,0 TDI", "4,0 V8 TDI", "4,2 TDI", "OSOBNO", "3,0 V6 TDI", "50 TDI", "3.0 TDI"],
"Q2": ["30 TDI", "1,6 TDI", "1,4 TFSI", "2,0 TDI", "OSOBNO", "1.6 TDI"],
"Q3": ["2,0 TDI S-TRONIC", "2,0 TDI", "2,0 TDI SPORT", "35 TDI", "35 TFSI", "2.0 TDI"],
"Q5": ["Q5 2,0 TDI S-TRONIC", "2,0 TDI S-TRONIC", "3,0 TDI S-TRONIC", "2,0 TDI", "SQ5 3,0 TDI", "2,0 TDI SPORT", "40 TDI", "3,0 TDI", "35 TDI", "2.0 TDI", "2.0 TDI QUATTRO", "50 TDI"],
"Q7": ["3,0 V6 TDI", "3,0 TDI", "3.0 TDI", "50 TDI"],
"Q8": ["50 TDI"],
"TT": ["2,0 TDI", "2,0 TFSI", "2.0 TDI QUATTRO", "1,8 T", "1,8 TFSI", "3,2 V6"]
},
"BMW": {
"I3": ["AUT.", "REX"],
"M4": ["M4", "CABRIO"],
"SERIJA 1": ["116D SPORT", "116D", "120D", "114D", "116I", "118D", "118D SPORT", "118I", "16D", "123D"],
"SERIJA 2": ["220D", "218D", "216D", "218I"],
"SERIJA 2 ACTIVE TOURER": ["218D", "216D", "218I", "220D"],
"SERIJA 2 GRAN TOURER": ["218D", "216D", "220D"],
"SERIJA 3": ["318D", "320D", "325D", "316D", "330XD", "320D SPORT", "320D M SPORT", "330D", "318I", "318D SPORT", "316I", "2.0D", "320I", "320XD", "18D"],
"SERIJA 3 CABRIOLET": ["320CD", "320D", "330CI", "335I", "330D", "320I", "320CI"],
"SERIJA 3 COMPACT": ["320TD", "316I"],
"SERIJA 3 COUPE": ["320CD", "320D", "320CI", "318CI", "320I", "330CD", "330D", "335I", "330CI"],
"SERIJA 3 GRAN TURISMO": ["320D", "318D", "1,8", "DIESEL"],
"SERIJA 3 TOURING": ["320D", "316D", "330D", "318D", "18D", "325D", "316I", "330XD", "335I", "320I"],
"SERIJA 4 COUPE": ["420D", "420D SPORT", "430D", "435D M SPORT", "420D M SPORT", "418D", "M4"],
"SERIJA 4 GRAN COUPE": ["418D SPORT", "418D", "420D", "420D SPORT", "420D M SPORT", "430D", "435D M SPORT"],
"SERIJA 5": ["520D", "530D", "530XD", "525D", "523I", "520D ALL-IN-5", "530I", "520D ALL-IN-5M", "525TDS", "518D", "520I", "535D", "525I", "525XD", "535XD", "540I", "20D", "25D"],
"SERIJA 5 GRAN TURISMO": ["30D", "535D", "530D", "520D"],
"SERIJA 5 TOURING": ["520D", "525D", "518D", "530D", "525XD", "530XD", "535D", "30D", "535XD", "530I"],
"SERIJA 6": ["640D", "645CI"],
"SERIJA 6 GRAN COUPE": ["640D"],
"SERIJA 7": ["730D", "740D", "750LI"],
"X1": ["20D", "XDRIVE20D", "18D", "XDRIVE18D", "SDRIVE18D", "SDRIVE20D", "SDRIVE16D", "16D", "2,0 D", "25D"],
"X2": ["SDRIVE18D", "XDRIVE20D"],
"X3": ["XDRIVE30D", "XDRIVE20D", "2,0 D", "XDRIVE35D", "3,0 D", "20D", "18D", "30D", "3,0 I", "SDRIVE18D", "3,0 SD", "2,0 I"],
"X4": ["20D", "30D", "XDRIVE20D", "2.0D"],
"X5": ["XDRIVE30D", "3,0 I", "XDRIVE40D", "XDRIVE35D", "3,0 D", "25D", "4,8 I", "30D", "M50D", "3,0 SD"],
"X6": ["40D", "35D", "30D SPORT", "35I", "30D", "M50D", "XDRIVE30D", "XDRIVE40D"]
}
};

var $manufacturer = $('<select id="manufacturer"></select>').appendTo('#container');
var $model = $('<select id="model"></select>').appendTo('#container');
var $type = $('<select id="type"></select>').appendTo('#container');

var manuHtml = Object.keys(carsdata).map(k => `<option>${k}</option>`).join('');
$manufacturer.html('<option>Please select...</option>' + manuHtml);

$("#manufacturer").on("change", function() {
var manufacturer = $(this).val();
var modelHtml = Object.keys(carsdata[manufacturer]).map(k => `<option>${k}</option>`).join('');
$model.html('<option>Please select...</option>' + modelHtml).show();
$type.val('').empty().hide();
});

$(document).on('change', '#model', function() {
var manufacturer = $('#manufacturer').val();
var model = $(this).val();
var typeHtml = carsdata[manufacturer][model].map(v => `<option>${v}</option>`).join('');
$type.html('<option>Please select...</option>' + typeHtml).show();
});
});
#model, #type {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container"></div>

关于jquery - 使用 jQuery 进行级联下拉的 3 级嵌套对象 - 第三级不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59984769/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com