Javascript 显示下拉选择中的详细信息

我想使用JavaScript在下拉列表中显示详细信息

我到现在为止写的代码如下。请帮我修一下

函数显示CardeTais{ var a={卡纳梅：印度，价格：900000，年份：2016}； var b={carName:Nano，价格：700000，年份：2017}； var c={carName:i20，价格：500000，年份：2013}； document.getElementByIdSelectCar.value=Indica； 显示详细信息a.carName-a.价格-a.年； document.getElementByIdSelectCar.value=Nano； 显示详细信息b.卡纳姆-b.价格-b.年份； document.getElementByIdSelectCar.value=i20； 显示详细信息c.carName-c.价格-c.年份； } 籼稻 纳米技术 i20

---

下面是一个工作示例

var cars=[ {卡纳梅：印度，价格：900000，车型年份：2016}， {卡纳姆：纳米，价格：700000，车型年份：2017}， {卡纳姆：i20，价格：500000，车型年份：2013} ] var selectNode=document.getElementById'SelectCar'； var detailNode=document.getElementById'CarDetail'； 功能显示卡详情{ 所选变量=selectNode.value； 汽车{ 如果选择了car.carName=={ detailNode.textContent=[car.carName，car.Price，car.yearOfModel]。加入“-”； } }; } 显示卡片详情；//显示启动时选择的车辆 请选择一辆汽车以获取其详细信息： 籼稻 纳米技术 i20

---

这里是一个工作示例

var cars=[ {卡纳梅：印度，价格：900000，车型年份：2016}， {卡纳姆：纳米，价格：700000，车型年份：2017}， {卡纳姆：i20，价格：500000，车型年份：2013} ] var selectNode=document.getElementById'SelectCar'； var detailNode=document.getElementById'CarDetail'； 功能显示卡详情{ 所选变量=selectNode.value； 汽车{ 如果选择了car.carName=={ detailNode.textContent=[car.carName，car.Price，car.yearOfModel]。加入“-”； } }; } 显示卡片详情；//显示启动时选择的车辆 请选择一辆汽车以获取其详细信息： 籼稻 纳米技术 i20

---

我建议您监听来自select元素的更改事件，然后通过更改文本进行响应。以下是如何做到这一点的概述：

const carSelect=document.getElementByIdSelectCar； const detailsPanel=document.getElementByIdCarDetail； //侦听select元素的更改，当更改时，运行updateCarDetails carSelect.addEventListenerchange，updateCarDetails； //制作一系列汽车-便于以后添加更多 常数车=[ {卡纳梅：印度，价格：900000，车型年份：2016}， {卡纳姆：纳米，价格：700000，车型年份：2017}， {卡纳姆：i20，价格：500000，车型年份：2013} ]; 函数updateCarDetails{ //找出当前选择的汽车 const selectedCarName=carSelect.value； const selectedCar=getCarByNameselectedCarName； //制作一个包含我们想要的详细信息的字符串 const details=`${selectedCar.carName}-${selectedCar.Price}-${selectedCar.yearOfModel}`； //更改“详细信息”面板的文本 detailsPanel.innerText=详细信息； } 函数getCarByNamecarName{ return cars.findcar=>car.carName===carName； } 请选择一辆汽车以获取其详细信息： 籼稻 纳米技术 i20

---

我建议您监听来自select元素的更改事件，然后通过更改文本进行响应。以下是如何做到这一点的概述：

const carSelect=document.getElementByIdSelectCar； const detailsPanel=document.getElementByIdCarDetail； //侦听select元素的更改，当更改时，运行updateCarDetails carSelect.addEventListenerchange，updateCarDetails； //制作一系列汽车-便于以后添加更多 常数车=[ {卡纳梅：印度，价格：900000，车型年份：2016}， {卡纳姆：纳米，价格：700000，车型年份：2017}， {卡纳姆：i20，价格：500000，车型年份：2013} ]; 函数updateCarDetails{ //找出当前选择的汽车 const selectedCarName=carSelect.value； const selectedCar=getCarByNameselectedCarName； //制作一个包含我们想要的详细信息的字符串 const details=`${selectedCar.carName}-${selectedCar.Price}-${selectedCar.yearOfModel}`； //更改“详细信息”面板的文本 detailsPanel.innerText=详细信息； } 函数getCarByNamecarName{ return cars.findcar=>car.carName===carName； } 请选择一辆汽车以获取其详细信息： 籼稻 纳米技术 i20

---

通过id获取select元素，然后将选项附加到该元素。而不是创建单个对象。在数组中创建它们怎么样

var cars = [
    {
        carName: "Car1",
        Price: "1,000,000",
        yearOfModel: "2018"
    }
]
var select = document.getElementById("SelectCar");
// The Option object takes the value to be shown and the second argument as the value attribute
cars.forEach(function (car) {
    select.options[select.options.length] = new Option(car.carName+'-'+car.Price+'-'+car.yearOfModel, car.carName);
});

---

按ID获取select元素，然后将选项附加到该元素。而不是创建单个对象。在数组中创建它们怎么样

var cars = [
    {
        carName: "Car1",
        Price: "1,000,000",
        yearOfModel: "2018"
    }
]
var select = document.getElementById("SelectCar");
// The Option object takes the value to be shown and the second argument as the value attribute
cars.forEach(function (car) {
    select.options[select.options.length] = new Option(car.carName+'-'+car.Price+'-'+car.yearOfModel, car.carName);
});

---

如何在保留onchange属性的同时更改代码？只需去掉selectNode.addEventListener。。。。我已经相应地更新了答案。非常感谢

---

@DavidHow可以在保留onchange属性的同时更改代码，只需去掉selectNode.addEventListener这一行。。。。我已经相应地更新了答案。非常感谢@DavidThank you非常感谢@Duncan ThackerThank you非常感谢@Duncan ThackerThank you非常感谢@boomfire非常感谢@boomfire