我正在嘗試制作汽車年、制造、模型可靠的價值形式。我的陣列采用以下格式。對于選定的年份和選定的品牌，我想填充相應的模型值。我已經把唯一的年份和制作成單獨的另一個陣列。我將如何達到預期的結果？
var car_arrays = [
{
id: 1,
year: 1909,
make: "Ford",
model: "Model T",
},
{
id: 2,
year: 1926,
make: "Chrysler",
model: "Imperial",
},
{
id: 3,
year: 1948,
make: "Citro?n",
model: "2CV",
},
{
id: 4,
year: 1950,
make: "Hillman",
model: "Minx Magnificent",
},
{
id: 5,
year: 1953,
make: "Chevrolet",
model: "Corvette",
},
{
id: 7,
year: 1954,
make: "Cadillac",
model: "Fleetwood",
},
{
id: 6,
year: 1954,
make: "Chevrolet",
model: "Corvette",
},
{
id: 8,
year: 1955,
make: "Chevrolet",
model: "Corvette",
},
{
id: 9,
year: 1955,
make: "Ford",
model: "Thunderbird",
},
{
id: 10,
year: 1956,
make: "Chevrolet",
model: "Corvette",
},
{
id: 12,
year: 1957,
make: "BMW",
model: "600",
},
{
id: 11,
year: 1957,
make: "Chevrolet",
model: "Corvette",
},
{
id: 14,
year: 1958,
make: "BMW",
model: "600",
},
{
id: 13,
year: 1958,
make: "Chevrolet",
model: "Corvette",
},
{
id: 15,
year: 1958,
make: "Ford",
model: "Thunderbird",
},
{
id: 16,
year: 1959,
make: "Austin",
model: "Mini",
},
{
id: 18,
year: 1959,
make: "BMW",
model: "600",
},
{
id: 17,
year: 1959,
make: "Chevrolet",
model: "Corvette",
},
{
id: 19,
year: 1960,
make: "Chevrolet",
model: "Corvair",
},
{
id: 20,
year: 1960,
make: "Chevrolet",
model: "Corvette",
},
{
id: 22,
year: 1960,
make: "Fairthorpe",
model: "Rockette",
},
{
id: 21,
year: 1960,
make: "Fillmore",
model: "Fillmore",
},
{
id: 23,
year: 1961,
make: "Austin",
model: "Mini Cooper",
},
{
id: 26,
year: 1961,
make: "Chevrolet",
model: "Corvette",
},
{
id: 25,
year: 1961,
make: "Pontiac",
model: "Tempest",
},
{
id: 24,
year: 1961,
make: "Studebaker",
model: "Avanti",
},
{
id: 30,
year: 1962,
make: "Buick",
model: "Special",
},
{
id: 28,
year: 1962,
make: "Chevrolet",
model: "Corvette",
},
{
id: 27,
year: 1962,
make: "Pontiac",
model: "Grand Prix",
},
{
id: 29,
year: 1962,
make: "Studebaker",
model: "Avanti",
},
{
id: 31,
year: 1963,
make: "Austin",
model: "Mini",
},
{
id: 32,
year: 1963,
make: "Austin",
model: "Mini Cooper S",
},
{
id: 37,
year: 1963,
make: "Chevrolet",
model: "Corvair 500",
},
{
id: 38,
year: 1963,
make: "Chevrolet",
model: "Corvette",
},
{
id: 34,
year: 1963,
make: "Ford",
model: "E-Series",
},
{
id: 36,
year: 1963,
make: "Pontiac",
model: "Grand Prix",
},
{
id: 33,
year: 1963,
make: "Rambler",
model: "Classic",
},];
function getYear() {
var makeid = document.getElementById("makeid");
var select, option;
select = document.getElementById("yearid");
for (let y in year) {
option = document.createElement("option");
option.value = option.text = year[y];
select.add(option);
}
var selectyear = document.getElementById("yearid");
makeid.removeAttribute("disabled");
}
function getMake() {
var makeid, yearid, option;
makeidselect = document.getElementById("makeid");
yearidselect = document.getElementById("yearid");
for (let y in year) {
option = document.createElement("option");
option.value = option.text = year[y];
yearidselect.add(option);
console.log(yearidselect.value);
}
for (let x in make) {
option = document.createElement("option");
option.value = option.text = make[x];
makeidselect.add(option);
console.log(makeidselect.value);
}
var year = [
1909, 1926, 1948, 1950, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961,
1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974,
1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987,
1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000,
2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
];
var make = [
"Ford",
"Chrysler",
"Citro?n",
"Hillman",
"Chevrolet",
"Cadillac",
"BMW",
"Austin",
"Fairthorpe",
"Fillmore",
"Pontiac",
"Studebaker",
"Buick",
"Rambler",
"Plymouth",
"Volkswagen",
"Jensen",
"Oldsmobile",
"Mercury",
"Dodge",
"Shelby",
"Porsche",
"Toyota",
"Mercedes-Benz",
"MG",
"Nissan",
"Honda",
"Mazda",
"Renault",
"Audi",
"Lincoln",
"Lotus",
"Maserati",
"Mitsubishi",
"Saab",
"Subaru",
"Suzuki",
"Lamborghini",
"Merkur",
"Land Rover",
"Acura",
"Lexus",
"Eagle",
"Alfa Romeo",
"Daihatsu",
"Geo",
"GMC",
"Hyundai",
"Infiniti",
"Isuzu",
"Jaguar",
"Jeep",
"Saturn",
"Volvo",
"HUMMER",
"Kia",
"Holden",
"Corbin",
"Daewoo",
"MINI",
"Maybach",
"Scion",
"Spyker",
"Aston Martin",
"Bentley",
"Panoz",
"Rolls-Royce",
"Spyker Cars",
"Ferrari",
"Hummer",
"Morgan",
"Peugeot",
"Foose",
"Aptera",
"Smart",
"Bugatti",
"Tesla",
"Ram",
"FIAT",
"Fiat",
"McLaren",
"BYD",
"McLaren Automotive",
"Mobility Ventures LLC",
"Pagani",
"Roush Performance",
"smart",
"SRT",
"Genesis",
"Karma",
"Koenigsegg",
"RUF Automobile",
"STI",
"Polestar",
"Kandi",
];
uj5u.com熱心網友回復：
您可以遍歷陣列：
let year = [], let make = [], ....
car_arrays.forEach(car => {
year.push(car.year)
make.push(car.make) ...
})
uj5u.com熱心網友回復：
你可以做這樣的事情來根據年份的值填充模型下拉串列并制作：
var CARS = [{
id: 1,
year: 1909,
make: 'Ford',
model: 'Model T',
},
{
id: 2,
year: 1926,
make: 'Chrysler',
model: 'Imperial',
},
{
id: 3,
year: 1948,
make: 'Citro?n',
model: '2CV',
},
{
id: 4,
year: 1950,
make: 'Hillman',
model: 'Minx Magnificent',
},
{
id: 5,
year: 1953,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 7,
year: 1954,
make: 'Cadillac',
model: 'Fleetwood',
},
{
id: 6,
year: 1954,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 8,
year: 1955,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 9,
year: 1955,
make: 'Ford',
model: 'Thunderbird',
},
{
id: 10,
year: 1956,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 12,
year: 1957,
make: 'BMW',
model: '600',
},
{
id: 11,
year: 1957,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 14,
year: 1958,
make: 'BMW',
model: '600',
},
{
id: 13,
year: 1958,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 15,
year: 1958,
make: 'Ford',
model: 'Thunderbird',
},
{
id: 16,
year: 1959,
make: 'Austin',
model: 'Mini',
},
{
id: 18,
year: 1959,
make: 'BMW',
model: '600',
},
{
id: 17,
year: 1959,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 19,
year: 1960,
make: 'Chevrolet',
model: 'Corvair',
},
{
id: 20,
year: 1960,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 22,
year: 1960,
make: 'Fairthorpe',
model: 'Rockette',
},
{
id: 21,
year: 1960,
make: 'Fillmore',
model: 'Fillmore',
},
{
id: 23,
year: 1961,
make: 'Austin',
model: 'Mini Cooper',
},
{
id: 26,
year: 1961,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 25,
year: 1961,
make: 'Pontiac',
model: 'Tempest',
},
{
id: 24,
year: 1961,
make: 'Studebaker',
model: 'Avanti',
},
{
id: 30,
year: 1962,
make: 'Buick',
model: 'Special',
},
{
id: 28,
year: 1962,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 27,
year: 1962,
make: 'Pontiac',
model: 'Grand Prix',
},
{
id: 29,
year: 1962,
make: 'Studebaker',
model: 'Avanti',
},
{
id: 31,
year: 1963,
make: 'Austin',
model: 'Mini',
},
{
id: 32,
year: 1963,
make: 'Austin',
model: 'Mini Cooper S',
},
{
id: 37,
year: 1963,
make: 'Chevrolet',
model: 'Corvair 500',
},
{
id: 38,
year: 1963,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 34,
year: 1963,
make: 'Ford',
model: 'E-Series',
},
{
id: 36,
year: 1963,
make: 'Pontiac',
model: 'Grand Prix',
},
{
id: 33,
year: 1963,
make: 'Rambler',
model: 'Classic',
},
]
const YEARS = [
1909, 1926, 1948, 1950, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961,
1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974,
1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987,
1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000,
2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
]
const MAKES = [
'Ford',
'Chrysler',
'Citro?n',
'Hillman',
'Chevrolet',
'Cadillac',
'BMW',
'Austin',
'Fairthorpe',
'Fillmore',
'Pontiac',
'Studebaker',
'Buick',
'Rambler',
'Plymouth',
'Volkswagen',
'Jensen',
'Oldsmobile',
'Mercury',
'Dodge',
'Shelby',
'Porsche',
'Toyota',
'Mercedes-Benz',
'MG',
'Nissan',
'Honda',
'Mazda',
'Renault',
'Audi',
'Lincoln',
'Lotus',
'Maserati',
'Mitsubishi',
'Saab',
'Subaru',
'Suzuki',
'Lamborghini',
'Merkur',
'Land Rover',
'Acura',
'Lexus',
'Eagle',
'Alfa Romeo',
'Daihatsu',
'Geo',
'GMC',
'Hyundai',
'Infiniti',
'Isuzu',
'Jaguar',
'Jeep',
'Saturn',
'Volvo',
'HUMMER',
'Kia',
'Holden',
'Corbin',
'Daewoo',
'MINI',
'Maybach',
'Scion',
'Spyker',
'Aston Martin',
'Bentley',
'Panoz',
'Rolls-Royce',
'Spyker Cars',
'Ferrari',
'Hummer',
'Morgan',
'Peugeot',
'Foose',
'Aptera',
'Smart',
'Bugatti',
'Tesla',
'Ram',
'FIAT',
'Fiat',
'McLaren',
'BYD',
'McLaren Automotive',
'Mobility Ventures LLC',
'Pagani',
'Roush Performance',
'smart',
'SRT',
'Genesis',
'Karma',
'Koenigsegg',
'RUF Automobile',
'STI',
'Polestar',
'Kandi',
]
MAKES.sort()
const yearSelection = document.getElementById('year')
const makeSelection = document.getElementById('make')
const modelSelection = document.getElementById('model')
const displayedCars = document.getElementById('cars')
for (let year of YEARS) {
const option = document.createElement('option')
option.textContent = year
option.value = year
yearSelection.appendChild(option)
}
for (let make of MAKES) {
const option = document.createElement('option')
option.textContent = make
option.value = make
makeSelection.appendChild(option)
}
const models = []
for (let car of CARS) {
const model = car.model
if (models.findIndex(m => m == model) == -1) {
const option = document.createElement('option')
option.className = 'car-model'
models.push(model)
option.textContent = model
option.value = model
modelSelection.appendChild(option)
}
}
const modelOptions = Object.values(document.querySelectorAll('.car-model'))
function populateModels() {
const selectedYear = yearSelection.value
const selectedMake = makeSelection.value
const filtered = CARS.filter(
car => car.year == selectedYear && car.make == selectedMake
)
for (let option of modelOptions) {
if (filtered.find(v => v.model == option.value)) {
option.hidden = false
} else {
option.hidden = true
}
}
if (filtered.length > 0) {
modelSelection.value = filtered[0].model
} else {
modelSelection.value = 'none'
}
}
populateModels()
yearSelection.onchange = () => populateModels()
makeSelection.onchange = () => populateModels()<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#" type="image/x-icon" />
<meta charset="UTF-8" />
</head>
<body>
<select name="" id="year"></select>
<select name="" id="make"></select>
<select name="" id="model">
<option value="none" disabled hidden>No models found</option>
</select>
</body>
<script src="main.js"></script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/337047.html
標籤：javascript 形式
上一篇：將表單外鍵限制為相關模型中的選擇