在 html 中添加车辆选择下拉菜单

Question

I want to add two drop down menus.我想添加两个下拉菜单。 One for car brand and another for car model.一个用于汽车品牌，另一个用于汽车模型。 I have done for car brand, but it is showing only 4 cars which are maruti swift, maruti alto, maruti wagonR.我为汽车品牌做过，但它只展示了 4 辆车，分别是马鲁蒂 swift、马鲁蒂 alto、马鲁蒂 wagonR。 I have a excel file of brand and model which I would like to add to this list.我有一个品牌和型号的 excel 文件，我想将其添加到此列表中。 There are 210 cars in total.共有210辆汽车。 I don't want to type it individually as it would take lot of time.我不想单独输入它，因为这会花费很多时间。 Is there a shorter way of doing it ?有没有更短的方法呢？

This is what I wrote:-这是我写的：-

<div class="wrap-input100">
                <span class="label-input100">Car Make:</span>
                <!-- <input class="input100" type="text" name="Make" placeholder="Enter Make of Your Car"> -->
                <form action="/action_page.php">
                <select name="cars">
                  <option value="select">select</option>
                  <option value="Maruti,Swift">Maruti,Swift</option>
                  <option value="Maruti,WagonR">Maruti,WagonR</option>
                  <option value="Maruti,Swift">Maruti,Swift Dzire</option>
                  <option value="Maruti,Alto">Maruti,Alto</option>
                </select>
                <span class="focus-input100"></span>
            </div>

Answer 1

Convert your excel to json from any online tool which will give you array of objects: (Google "excel to json online" you will find plenty of tools)从任何在线工具将您的 excel 转换为 json，这将为您提供一系列对象：（谷歌“excel to json online”，您会发现很多工具）

You can change the js Object keys of my code as per your json.您可以根据您的 json 更改我的代码的 js 对象键。

I have created a plunker我创建了一个plunker

HTML & Javascript HTML 和 JavaScript

<!DOCTYPE html>
<html>

  <head>



  </head>

  <body>
    <h1>Hello Plunker!</h1>
     <select name="cars" id="cars">
                  </select>
     <script>
        let json = [
    {
        "Brand": "Maruti",
        "Model": "Swift"
    },
    {
        "Brand": "Maruti",
        "Model": "Desire"
    },
    {
        "Brand": "Maruti",
        "Model": "WagonR"
    },
    {
        "Brand": "Maruti",
        "Model": "Ritz"
    },
    {
        "Brand": "Maruti",
        "Model": "Zen"
    },
    {
        "Brand": "Maruti",
        "Model": "Alto"
    }
];
dropDown = document.getElementById('cars') ;
function myFunction(item, index) { 
  console.log(item.Brand,item.Model)
  dropDown.innerHTML = dropDown.innerHTML + "<option value='"+item.Brand + ' ' + item.Model +"'>"+item.Brand +' ' +  item.Model+"</option>"
}

json.forEach(myFunction)


      </script>
  </body>

</html>

在 html 中添加车辆选择下拉菜单

问题描述

1 个解决方案

解决方案1
1 2019-02-25 10:37:20

在 html 中添加车辆选择下拉菜单

问题描述

1 个解决方案

解决方案1 1 2019-02-25 10:37:20

解决方案1
1 2019-02-25 10:37:20