如何在select和option标记中添加JSON数据？
如何在select和option标记中添加JSON数据？
提问于 2015-05-18 06:01:45
我有这个html代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="CarInfoStyle.css">
</head>
<script src="CarInfoJavascript.js"></script>
<body>
<div class="searchfilter">
<div class="searchwrapper">
<select class="selectClass" id="minYear">
<option value="minYear">Select Year</option>
<option value="(All)">ALL</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
</select>
to
<select class="selectClass" id="maxYear">
<option value="maxYear">Select Year</option>
<option value="(All)">ALL</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
</select>
<select id="make" onchange="DropdownOption()">
<option value="" selected disabled>Make</option>
<option value="alfa romeo">ALFA ROMEO</option>
<option value="audi">AUDI</option>
<option value="bmw">BMW</option>
<option value="daihatsu">DAIHATSU</option>
<option value="ford">FORD</option>
<option value="honda">HONDA</option>
<option value="lexus">LEXUS</option>
<option value="mazda">MAZDA</option>
<option value="mercedes-benz">MERCEDES-BENZ</option>
<option value="mini">MINI</option>
<option value="mitsubishi">MITSUBISHI</option>
<option value="nissan">NISSAN</option>
<option value="subaru">SUBARU</option>
<option value="suzuki">SUZUKI</option>
<option value="toyota" name="toyota">TOYOTA</option>
<option value="volkswagen">VOLKSWAGEN</option>
</select>
<select id="Model" disabled>
<option value="Model" name="model" selected disabled>Model</option>
</select>
<input type="text" size="20" name="searchbox">
<input type="button" name="searchbutton" value="Search" onclick="createTable()">
</div>
</div>
<div class="CSSTableGenerator">
<table id="MyTable" cellspacing='0'>
<tbody>
</tbody>
</table>
</div>
</body>
</html> 这个JSON对象代码：
var carData = [{
"ConditionNotes": {},
"Photos": {},
"RealChassisNo": "BJ5W-315859",
"Age": 0,
"Miles": 0,
"ImprovementCost": 0,
"AirBagType": 0,
"M3": 0,
"Category": 0,
"IsMiles": false,
"IsInnerCargo": false,
"IsPreSold": false,
"IsNoNZ": false,
"InnerCargoNote": null,
"DateStock": "\/Date(-62135596800000)\/",
"IsSold": false,
"PriceSales": 0,
"PriceConfirmation": 0,
"PriceExport": 0,
"PriceATSales": 0,
"ScaledMargin": 0,
"PriceDynamic": 0,
"FobFees": 332000.0000,
"OFSFees": 1440.0000,
"CIFFees": 0,
"FreightRate": 0,
"PriceBase": 0,
"MarketTerm": null,
"IsIncludeOPC": false,
"CustomerTerm": null,
"LandedCost": 0,
"NZNote": null,
"NZStructuralNote": null,
"NZStructuralCost": 0,
"IDIBCInfo": null,
"TransportStatus": null,
"DateDeparture": "\/Date(1281801600000)\/",
"DateArrive": "\/Date(1283788800000)\/",
"ShipName": "Saracen Star(KB)",
"TypeOfSale": "",
"BuyTripCustomer": "",
"IsSplitCurrency": false,
"Currency": "JPY",
"CountryID": 75,
"IsFollowing": false,
"FrieghtAndInsuranceTerm": null,
"FrieghtAndInsuranceFees": 0,
"PriceBaseForATNZ": 0,
"IDVehicle": "232960",
"Price": 0,
"MaskChassisNo": null,
"Make": "MAZDA",
"Model": "FAMILIA",
"Year": 2002,
"Month": 0,
"Type": null,
"Location": null,
"Grade": "S-F",
"Transmission": null,
"KMS": 0,
"EngineDisplacement": null,
"Fuel": null,
"Doors": null,
"ConditionGrade": null,
"Color": null,
"IsPowerSteering": false,
"IsPowerWindow": false,
"IsAirConditioned": false,
"InteriorColor": null,
"InteriorType": null,
"HasSunRoof": false,
"Length": 0,
"Width": 0,
"Height": 0,
"WheelStyle": 0,
"HasSpareKey": false,
"SalesNote": null,
"IsSale": false,
"IsNewArrival": false,
"IsReserved": false,
"IsThailandStocks": false,
"IsLeftHandDrive": false,
"DateInspected": "\/Date(-62135596800000)\/",
"ExteriorVideo": null,
"InteriorVideo": null,
"IsSingaporeStocks": false,
"IsUKStocks": false,
"IsOriginalLHD": false,
"CustomerPort": null,
"Airbag": 0,
"IsNonSmoker": false,
"Tonnage": 0,
"InteriorGrade": null,
"DateConfirm": "\/Date(-62135596800000)\/"
}, {
"ConditionNotes": {},
"Photos": {},
"RealChassisNo": "ZZE127-0006450",
"Age": 0,
"Miles": 0,
"ImprovementCost": 0,
"AirBagType": 0,
"M3": 0,
"Category": 0,
"IsMiles": false,
"IsInnerCargo": false,
"IsPreSold": false,
"IsNoNZ": false,
"InnerCargoNote": null,
"DateStock": "\/Date(-62135596800000)\/",
"IsSold": false,
"PriceSales": 0,
"PriceConfirmation": 0,
"PriceExport": 0,
"PriceATSales": 0,
"ScaledMargin": 0,
"PriceDynamic": 0,
"FobFees": 347000.0000,
"OFSFees": 1440.0000,
"CIFFees": 0,
"FreightRate": 0,
"PriceBase": 0,
"MarketTerm": null,
"IsIncludeOPC": false,
"CustomerTerm": null,
"LandedCost": 0,
"NZNote": null,
"NZStructuralNote": null,
"NZStructuralCost": 0,
"IDIBCInfo": null,
"TransportStatus": null,
"DateDeparture": "\/Date(1284480000000)\/",
"DateArrive": "\/Date(1286208000000)\/",
"ShipName": "Spring Sky(KB)",
"TypeOfSale": "",
"BuyTripCustomer": "",
"IsSplitCurrency": false,
"Currency": "JPY",
"CountryID": 75,
"IsFollowing": false,
"FrieghtAndInsuranceTerm": null,
"FrieghtAndInsuranceFees": 0,
"PriceBaseForATNZ": 0,
"IDVehicle": "233407",
"Price": 0,
"MaskChassisNo": null,
"Make": "TOYOTA",
"Model": "WILL",
"Year": 2002,
"Month": 0,
"Type": null,
"Location": null,
"Grade": "Vs",
"Transmission": null,
"KMS": 0,
"EngineDisplacement": null,
"Fuel": null,
"Doors": null,
"ConditionGrade": null,
"Color": null,
"IsPowerSteering": false,
"IsPowerWindow": false,
"IsAirConditioned": false,
"InteriorColor": null,
"InteriorType": null,
"HasSunRoof": false,
"Length": 0,
"Width": 0,
"Height": 0,
"WheelStyle": 0,
"HasSpareKey": false,
"SalesNote": null,
"IsSale": false,
"IsNewArrival": false,
"IsReserved": false,
"IsThailandStocks": false,
"IsLeftHandDrive": false,
"DateInspected": "\/Date(-62135596800000)\/",
"ExteriorVideo": null,
"InteriorVideo": null,
"IsSingaporeStocks": false,
"IsUKStocks": false,
"IsOriginalLHD": false,
"CustomerPort": null,
"Airbag": 0,
"IsNonSmoker": false,
"Tonnage": 0,
"InteriorGrade": null,
"DateConfirm": "\/Date(-62135596800000)\/"
}]; 最后是我的JS代码：
function createTable() {
var table = document.getElementById("MyTable");
table.innerHTML = "";
var header = table.createTHead();
var row = header.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "Chassis";
cell2.innerHTML = "Year";
cell3.innerHTML = "Make";
cell4.innerHTML = "Model";
cell5.innerHTML = "Model Grade";
cell6.innerHTML = "Ship Name";
var makevalue = document.getElementById("make").value;
var modelvalue = document.getElementById("Model").value;
var minYearvalue = parseInt(document.getElementById("minYear").value);
var maxYearvalue = parseInt(document.getElementById("maxYear").value);
for (var i = 0; i < 757; i++) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var chassisCell = row.insertCell(0);
var yearCell = row.insertCell(1);
var makeCell = row.insertCell(2);
var modelCell = row.insertCell(3);
var modelGradeCell = row.insertCell(4);
var shipNameCell = row.insertCell(5);
chassisCell.innerHTML = carData[i].RealChassisNo;
yearCell.innerHTML = carData[i].Year;
makeCell.innerHTML = carData[i].Make;
modelCell.innerHTML = carData[i].Model;
modelGradeCell.innerHTML = carData[i].Grade;
shipNameCell.innerHTML = carData[i].ShipName;
}
}
function DropdownOption(carData) {
document.getElementById("Model").disabled = false;
var model = document.getElementById("Model");
var option = document.createElement("option");
var make = document.getElementById("make").value;
model.innerHTML = "";
option.text = "Model";
model.add(option);
option.innerHTML = "Model";
if (make == "alfa romeo") {
document.getElementById("Model").options[0].disabled = true;
var choice = document.createElement('option');
choice.innerHTML = "156";
model.appendChild(choice);
} else if (make == "audi") {
document.getElementById("Model").options[0].disabled = true;
var audi = ["A4", "A3", "TT"];
for (i = 0; i < 3; i++) {
var choices1 = document.createElement('option');
choices1.value = audi[i];
choices1.innerHTML = audi[i];
model.appendChild(choices1);
}
} else if (make == "bmw") {
document.getElementById("Model").options[0].disabled = true;
var bmw = ["116I", "118I", "120i", "120I", "1 SERIES", "320I", "323I", "MINI", "MINICOOPER", "MINI COOPER S", "X1", "X3"];
for (i = 0; i < 12; i++) {
var choices2 = document.createElement('option');
choices2.value = bmw[i];
choices2.innerHTML = bmw[i];
model.appendChild(choices2);
}
} else if (make == "daihatsu") {
document.getElementById("Model").options[0].disabled = true;
var choice3 = document.createElement('option');
choice3.innerHTML = "BeGo";
model.appendChild(choice3);
} else if (make == "ford") {
document.getElementById("Model").options[0].disabled = true;
var ford = ["Escape", "Focus", "Kuga"];
for (i = 0; i < 3; i++) {
var choices4 = document.createElement('option');
choices4.value = ford[i];
choices4.innerHTML = ford[i];
model.appendChild(choices4);
}
} else if (make == "honda") {
document.getElementById("Model").options[0].disabled = true;
var honda = ["ACCORD", "AIR WAVE", "CIVIC", "CIVICFERIO", "CR-V", "EDIX", "ELYSION", "FIT", "HR-V", "INSPIRE", "ODYSSEY", "STEPWAGON", "STREAM"];
for (i = 0; i < 13; i++) {
var choices5 = document.createElement('option');
choices5.value = honda[i];
choices5.innerHTML = honda[i];
model.appendChild(choices5);
}
} else if (make == "lexus") {
document.getElementById("Model").options[0].disabled = true;
var lexus = ["IS250", "IS350"];
for (i = 0; i < 2; i++) {
var choices6 = document.createElement('option');
choices6.value = lexus[i];
choices6.innerHTML = lexus[i];
model.appendChild(choices6);
}
} else if (make == "mazda") {
document.getElementById("Model").options[0].disabled = true;
var mazda = ["AXELA", "ATENZA", "BONGO", "DEMIGO", "FAMILIA", "MPV", "PREMACY", "VERISA"];
for (i = 0; i < 8; i++) {
var choices7 = document.createElement('option');
choices7.value = mazda[i];
choices7.innerHTML = mazda[i];
model.appendChild(choices7);
}
} else if (make == "mercedes-benz") {
document.getElementById("Model").options[0].disabled = true;
var mercedesbenz = ["A170", "A200", "C230", "C200 KOMPRESSOR"];
for (i = 0; i < 4; i++) {
var choices8 = document.createElement('option');
choices8.value = mercedesbenz[i];
choices8.innerHTML = mercedesbenz[i];
model.appendChild(choices8);
}
} else if (make == "mini") {
document.getElementById("Model").options[0].disabled = true;
var mini = ["COOPER", "MINI ONE"];
for (i = 0; i < 2; i++) {
var choices9 = document.createElement('option');
choices9.value = mini[i];
choices9.innerHTML = mini[i];
model.appendChild(choices9);
}
} else if (make == "mitsubishi") {
document.getElementById("Model").options[0].disabled = true;
var mitsubishi = ["COLT", "COLT PlUS", "DELICA", "GALANT", "GRANDIS", "LANCER", "OUTLANDER", "PAJERO", "PAJERO MINI"];
for (i = 0; i < 9; i++) {
var choices10 = document.createElement('option');
choices10.value = mitsubishi[i];
choices10.innerHTML = mitsubishi[i];
model.appendChild(choices10);
}
} else if (make == "nissan") {
document.getElementById("Model").options[0].disabled = true;
var nissan = ["BLUEBIRD SYLPHY", "CARAVAN", "CUBE", "DUALIS", "FAIRLADY", "FUGA", "JUKE", "LAFESTA", "MARCH", "MURANO", "NOTE", "NV200", "NV350 CARAVAN", "PRESAGE", "STAGEA", "SKYLINE", "TEANA", "TIIDA", "TIIDA LATIO", "VANETTE", "WINGROAD", "X-TRAIL"];
for (i = 0; i < 22; i++) {
var choices11 = document.createElement('option');
choices11.value = nissan[i];
choices11.innerHTML = nissan[i];
model.appendChild(choices11);
}
} else if (make == "subaru") {
document.getElementById("Model").options[0].disabled = true;
var subaru = ["EXIGA", "FORESTER", "IMPREZA", "LEGACY", "LEGACY TOURING WAGON", "TRAVIQ", "OUTBACK"];
for (i = 0; i < 7; i++) {
var choices12 = document.createElement('option');
choices12.value = subaru[i];
choices12.innerHTML = subaru[i];
model.appendChild(choices12);
}
} else if (make == "suzuki") {
document.getElementById("Model").options[0].disabled = true;
var suzuki = ["ESCUDO", "FORESTER", "JIMNY", "SWIFT", "SX-4"];
for (i = 0; i < 5; i++) {
var choices13 = document.createElement('option');
choices13.value = suzuki[i];
choices13.innerHTML = suzuki[i];
model.appendChild(choices13);
}
} else if (make == "toyota") {
document.getElementById("Model").options[0].disabled = true;
var toyota = ["ALLEX", "ALLION", "ALTEZZA", "AURIS", "AVENSIS", "BB", "BLADE", "CALDINA", "CAMRY", "COROLLA AXIO", "COROLLA FIELDER", "COROLLA RUNX", "ESTIMA", "HIACE", "HILUX SURF", "IPSUM", "IST", "ISIS", "IQ", "LANDCRUISER PRADO", "MARK X", "MARK ZIO", "RACTIS", "RAV4", "REGIUS ACE", "RUSH", "SUCCEED", "TOWNACE", "VANGUARD", "VITZ", "WILL", "WISH"];
for (i = 0; i < 32; i++) {
var choices14 = document.createElement('option');
choices14.value = toyota[i];
choices14.innerHTML = toyota[i];
model.appendChild(choices14);
}
} else if (make == "volkswagen") {
document.getElementById("Model").options[0].disabled = true;
var volkswagen = ["GOLF", "GOLF VARIANT", "PASSAT VARIANT", "TIGUAN", "TOUAREG"];
for (i = 0; i < 5; i++) {
var choices15 = document.createElement('option');
choices15.value = volkswagen[i];
choices15.innerHTML = volkswagen[i];
model.appendChild(choices15);
}
}
}我的问题是，如果我想从make中选择，然后从Model中选择选项，数据将得到所选Make和Model的值。我已经试过这么远了，它似乎不起作用，它只会显示我创建的单元格1-6。请帮帮忙。
function createTable() {
var table = document.getElementById("MyTable");
table.innerHTML = "";
var header = table.createTHead();
var row = header.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "Chassis";
cell2.innerHTML = "Year";
cell3.innerHTML = "Make";
cell4.innerHTML = "Model";
cell5.innerHTML = "Model Grade";
cell6.innerHTML = "Ship Name";
var makevalue = document.getElementById("make").value;
var modelvalue = document.getElementById("Model").value;
var minYearvalue = parseInt(document.getElementById("minYear").value);
var maxYearvalue = parseInt(document.getElementById("maxYear").value);
for (var i = 0; i < 757; i++) {
//I tried this condition not working.
if (carData[i].Make == makevalue && carData[i].Model == modelvalue && (carData[i].Year >= minYearvalue && carData[i].Year <= maxYearvalue)) {
var table = document.getElementById("MyTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var chassisCell = row.insertCell(o);
var yearCell = row.insertCell(1);
var makeCell = row.insertCell(2);
var modelCell = row.insertCell(3);
var modelGradeCell = row.insertCell(4);
var shipNameCell = row.insertCell(5);
chassisCell.innerHTML = carData[i].RealChassisNo;
yearCell.innerHTML = carData[i].Year;
makeCell.innerHTML = carData[i].Make;
modelCell.innerHTML = carData[i].Model;
modelGradeCell.innerHTML = carData[i].Grade;
shipNameCell.innerHTML = carData[i].ShipName;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-18 09:41:02
问题是您的数组保存了make的小写。试试这个，你应该做得很好：
if (carData[i]['Make'].toLowerCase() == makevalue.toLowerCase() && carData[i].Model == modelvalue && (carData[i].Year >= minYearvalue && carData[i].Year <= maxYearvalue)) {您的代码中有一个错误：
var chassisCell = row.insertCell(o);应该是
var chassisCell = row.insertCell(0);参见这里的一个工作示例：http://jsfiddle.net/klickagent/dyrLw3jf/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30296067
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号