Question

我想添加两个下拉菜单。一个用于汽车品牌，另一个用于汽车模型。我已经为汽车品牌做过，但它只显示了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>

Answer 1

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

您可以根据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>

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

1 个答案: