Question

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

我到目前为止编写的代码如下。请帮我修复它。

 function displayCarDetais(){
     var a= {carName:"Indica",Price:"900000",year:"2016"};
     var b= {carName:"Nano",Price:"700000",year:"2017"};
     var c= {carName:"i20",Price:"500000",year:"2013"};
     document.getElementById("SelectCar").value = "Indica";
     displayDetails(a.carName - a.Price - a.year);
     document.getElementById("SelectCar").value = "Nano";
     displayDetails(b.carName - b.Price - b.year);
     document.getElementById("SelectCar").value = "i20";
     displayDetails(c.carName - c.Price - c.year);    
    }

    <!DOCTYPE html>

    
    <select id="SelectCar"  onsubmit="displayDetails()">
    <option value="Indica">Indica</option>
    <option value="Nano">Nano</option>
    <option value="i20">i20</option>
    </select>

Answer 1

这是一个可行的示例。

var cars = [
  {carName:"Indica",Price:"900000",yearOfModel:"2016"},
  {carName:"Nano",Price:"700000",yearOfModel:"2017"},
  {carName:"i20",Price:"500000",yearOfModel:"2013"}
]

var selectNode = document.getElementById('SelectCar');
var detailNode = document.getElementById('CarDetail');

function displayCarDetails(){
  var selected = selectNode.value;
  cars.forEach(function (car) {
    if (car.carName === selected) {
      detailNode.textContent = [car.carName, car.Price, car.yearOfModel].join(' - ');
    }
  });  
}

displayCarDetails(); // show which car is selected on start

Please Choose a Car to get its Details: 
<select id="SelectCar" onchange="displayCarDetails()">
  <option value="Indica">Indica</option>
  <option value="Nano">Nano</option>
  <option value="i20">i20</option>
</select>
<p id="CarDetail"></p>

Answer 2

我建议您侦听change元素中的select个事件，然后通过更改文本进行响应。以下是有关操作方法的概述：

const carSelect = document.getElementById("SelectCar");
const detailsPanel = document.getElementById("CarDetail");

//listen for changes to the select element, and when it does, run updateCarDetails
carSelect.addEventListener("change", updateCarDetails);

//make an array of cars - makes it easy to add more later
const cars = [
   {carName: "Indica", Price: "900000", yearOfModel: "2016"},
   {carName: "Nano", Price: "700000", yearOfModel: "2017"},
   {carName: "i20", Price: "500000", yearOfModel: "2013"}
];

function updateCarDetails() {
   //figure out which car is currently selected
   const selectedCarName = carSelect.value;
   const selectedCar = getCarByName(selectedCarName);

   //make a string containing the details we want
   const details = `${selectedCar.carName} - ${selectedCar.Price} - ${selectedCar.yearOfModel}`;

   //change the text of the details panel
   detailsPanel.innerText = details;
}

function getCarByName(carName) {
   return cars.find(car => car.carName === carName);
}

Please Choose a Car to get its Details:
<select id="SelectCar" onchange="displayCarDetails()">
  <option value="Indica">Indica</option>
  <option value="Nano">Nano</option>
  <option value="i20">i20</option>
</select>
<p id="CarDetail"></p>

Answer 3

通过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);
});

显示下拉菜单中的详细信息

3 个答案: