Creating an HTML drop-down menu for selecting a vehicle

I am looking to incorporate two drop down menus on my website. One for selecting car brands and the other for choosing specific car models. I have successfully set up the drop down menu for car brands, but it currently only displays four options: Maruti Swift, Maruti Alto, and Maruti WagonR. I have an Excel file containing a list of 210 cars with their respective brands and models that I would like to integrate into this selection menu. Entering each model individually would be time-consuming, so I am wondering if there is a more efficient method to add all the car models at once?

Here is the code snippet I have implemented:

<div class="wrap-input100">
                <span class="label-input100">Car Make:</span>
                 
                 <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 Dzire">Maruti,Swift Dzire</option>
                  <option value="Maruti,Alto">Maruti,Alto</option>
                </select>
                <span class="focus-input100"></span>
            </div>

https://i.sstatic.net/xbgvI.png

javascripthtmlcssdrop-down-menu

Answer №1

Transform your excel data into JSON format effortlessly using various online tools that provide an array of objects: (Search for "convert excel to json online" to discover numerous options)

You have the flexibility to customize the JavaScript object keys in the code according to your JSON structure.

Explore the Plunker I've put together

HTML & Javascript

<!DOCTYPE html>
<html>

  <head>



  </head>

  <body>
    <h1>Welcome to Plunker!</h1>
     <select name="cars" id="cars">
                  </select>
     <script>
        let carModels = [
    {
        "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 displayCar(item, index) { 
  console.log(item.Brand,item.Model)
  dropDown.innerHTML = dropDown.innerHTML + "<option value='"+item.Brand + ' ' + item.Model +"'>"+item.Brand +' ' +  item.Model+"</option>"
}

carModels.forEach(displayCar)


      </script>
  </body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locate each document in MongoDB that pertains to a time period of

I have been trying to fetch data for the past n days. For instance, I am interested in retrieving data from the last 3 days. However, after following a solution I found on StackOverflow, I am only able to retrieve one document instead of all the documents. ...

javascriptnode.jsmongodbmongoose

Ways to stop a background image from repeating?

<div style="background-image: url('https://i.ibb.co/v1B855w/bg15.png'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name6.png" /> ...

htmlcss

Problem detected in id modification

My JavaScript function is triggered with an onChange event, which works fine when there's only one. <input class="form-control" type="text" onchange="opert(<?php echo $fetch["id_prod"] ?>,1)" id="name" value="<?php echo $fetch["name_prod" ...

javascriptarrays

An autocomplete CSS editor with Firebug-like features

Looking for a CSS (or HTML) editor that offers code autocompletion similar to Firebug's features. I believe it's referred to as "autocomplete as you type." Thank you! Edit: I came across a tool called Zen Coding that provides shortcuts for cod ...

htmlcss

Utilizing HTML 5 Video and the src Attribute in Vue Components

I am facing an issue with loading an HTML 5 video dynamically on my page. I am using vue for this purpose and in my js controller, I set a variable containing the video path. Here is how I am trying to use the variable in my page: <video width="450" co ...

javascriptvue.js

The browser is lagging behind a few frames when repainting on high-resolution displays

Currently, I'm working on a website that features an infinite grid. Users have the ability to navigate through the grid by simply holding down the right click on their mouse and moving it around. The technical details: To achieve this functionality, ...

javascriptcssvue.jsbrowser

Using Javascript to create a radio button group

Is there a way to trigger an alert message when all radio buttons are checked as 'no'? I currently am only able to check each radio button individually. //The method I currently know $('#attraction1').change( function(){ if ($(this ...

javascripthtmljquery

Switching the background image with a single click and reverting it back with a double click using jquery

I am working on a project with multiple div elements which need their background images to change upon clicking and revert back to the original image when clicked again. Below is the CSS code for one of the divs, including its Class and ID: .tab_box { wid ...

jquerycssimageonclicktoggle

What is the best way to obtain a date in the format of yyyy_mm_dd from a datepicker tool?

I am working with 2 datepickers that have similar structures, but different names. The first one has the id "fecha_1_1" and the second one has the id "fecha_1_2". <div class="col-sm-3"> <p>Desde</p> <div class="f ...

javascripthtmlajaxtwitter-bootstrap-3datepicker

How can I style the options and optgroups of a select dropdown with CSS, focusing on padding and margins?

In my experience, I have found that padding or margin CSS properties only seem to affect the appearance of options within the select menu in Firefox browser. I attempted the same styling in Internet Explorer and Chrome but it did not have any effect. Is ...

javascriptasp.nethtml

When working in React, I encountered a problem with the for of loop, as it returned an error stating "x is undefined." Although I could easily switch to using a simple for loop, I find the for of loop to

I'm encountering an issue when using a for of loop in React, as it gives me an error stating that "x is undefined". import { useEffect } from "react"; export default function HomeContent() { useEffect(() => { let content = document ...

javascriptreactjs

How to extract user data from a JWT token using Node.js?

In my MEAN stack authentication application, I am utilizing Node and Angular. After a successful login, I set a JWT token and store it in a session within the controller by assigning the token to config.headers through a service interceptor: var token = j ...

javascriptangularjsnode.jsjwt

Activate the jQuery click event by specifying the URL

On my webpage, I have a jQuery click function that loads multiple HTML pages into a specified div. I am looking to set specific URLs that will trigger this event, like test.com#about <script type="text/javascript"> $(document). ...

javascriptjqueryhtml

Adjust the size of divs using JQuery UI's draggable feature

Looking for a way to make two divs share 100% of their parent's width, with a dynamic resizing feature in between them? Check out my solution here: http://jsfiddle.net/aRQ7a/ However, I'm facing an issue where when I decrease the size of the pre ...

javascriptjqueryhtmlcssjquery-ui

Connecting Vue.js components together

I have two separate components - one for viewing data and another for editing the same data. The viewing component contains labels and paragraphs, while the editing component includes inputs and textareas. Both components are fed the same data object. Is ...

javascriptvue.jsvue-component

How can the carousel item numbers be adjusted for proper display?

I'm currently working on an Angular app and have encountered a task related to displaying 5 cards using mdbootstrap. I want to showcase these cards in a carousel format, but with a twist - I only want the carousel functionality to be active on mobile ...

cssangularbootstrap-4mdbootstrap

Examining the functionality of my PHP codes and forms

I'm currently working with two HTML forms and two PHP scripts. The first form is designed to save a user's email to a .txt file, while the second form is a Stripe payment form that processes payments using PHP code. However, I've encountere ...

phphtmlformstesting

What is the best way to display the entire background image in a jumbotron?

After some experimentation, I discovered that by increasing the amount of content I have, it displays the full background image. Is there a clean and efficient way to achieve this? <div class="jumbotron jumbotron-fluid" style="background: url('./a ...

htmlcsstwitter-bootstrapimage

Ways to fix text overlap in a pill

Click here to view the code on jsBin I quickly copied HTML/CSS code to jsBin using a tool called SnappySnippet. I attempted various solutions, but none of them worked. The best option for me seems to be overflow: ellipses word-break: break-word; word-b ...

htmlcssnav-pills

"Encountering an issue while using Node.js to spawn Python for processing binary images, receiving the error message 'node error spawn ENAMETOOLONG'

My current issue involves trying to save an image by initiating a python process from within a node.js script. This image is transmitted as binary data from the Node.JS script to the Python process. In my index.js script, I spawn a python script named my_ ...

javascriptpythonnode.js