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

【问题标题】：add vehicle select drop down menu in html在html中添加车辆选择下拉菜单
【发布时间】：2019-02-25 18:37:20
【问题描述】：

我想添加两个下拉菜单。一个用于汽车品牌，另一个用于汽车型号。我为汽车品牌做过，但它只显示了 4 辆汽车，它们是 maruti swift、maruti alto、maruti wagonR。我有一个品牌和型号的 excel 文件，我想将其添加到此列表中。总共有210辆汽车。我不想单独输入它，因为它会花费很多时间。有没有更短的方法？

这是我写的：-

<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>

【问题讨论】：

是的，您可以使用 apache poi 编写一个 java 程序来读取 excel，然后将响应发送到 ui 并使用响应中的数据创建下拉列表
@brk 会比复制粘贴更长。 Pranteek Singh 您可以将列复制到纯文本文件中，然后使用您喜欢的文本编辑器中的正则表达式进行更改。
您可以将这些汽车添加到后端并通过 ajax 调用获取它们，这将使您的代码灵活，以防您需要添加或删除汽车。

标签： javascript html css drop-down-menu

【解决方案1】：

从任何在线工具将您的 excel 转换为 json，这将为您提供对象数组：（谷歌“excel to json online”你会发现很多工具）

您可以根据您的 json 更改我的代码的 js 对象键。

I have created a plunker

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>

【讨论】：