CODEWITHSUNDEEP
javascripthtml
user11017362
user11017362

Reputation:

Display details from dropdown selection

I would like to display the details in the dropdown list using JavaScript.

The code I've written till now is below. Please help me fix it.

 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>

Upvotes: 1

Views: 1496

Answers (3)

Davi
Davi

Reputation: 4147

Here is a working example.

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>

Upvotes: 3

Duncan Thacker
Duncan Thacker

Reputation: 5188

I would recommend listening to change events coming from your select element, and then respond by changing the text. Here's an outline of how to do that:

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>

Upvotes: 1

Chansters
Chansters

Reputation: 141

Get the select element by ID and then append the options to it. And instead of creating individual objects. How about creating them inside of an array.

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

Upvotes: 0

Related Questions