javascript - 显示下拉选择的详细信息

标签 javascript html

我想使用 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>
   
   

最佳答案

这是一个工作示例。

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>

关于javascript - 显示下拉选择的详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54534206/

相关文章:

javascript - Windows.open 上正在打开多个窗口

javascript - 根据名称删除属性

php - 我该如何修复 Heroku imagecreatefromjpeg()

javascript - 基本的 jQuery 问题

css - 如何让我的图像边框出现在背景颜色之外

c# - 如何将值从 HTML 标签/元素传递到 C# 中的代码隐藏?

javascript - 来自 getImageData 的 RGB 值未定义

javascript - Contenteditable 在子节点上设置插入符号

html - 内联元素之间的等边距

javascript - 菜单/页面缩小效果?