Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

144
Views
How can I autopopulate selection list in javascript?

I would like to auto populate my HTML table with drop down list.

I used below code, but the problem is, I need to specify 24 option to this drop down list, and if I would like add all 24, this line will be extremly long.

Can I ask if there is any way to solve it a bit shorter code and better way?

List:

AC Propulsion

Ajax

AM General

Ambassador

AMC

American

American Underslung

Anteros Coachworks

Apollo

Apperson

Arnolt

Auburn

Aurica Motors

Avanti

Brewster

Brisco

Brush

BXR

Carroll Shelby

Case

Chadwick

Chandler

Checker

Comet

row2.insertCell(count + 1).innerHTML = '<select id="' + count2 + '"' + 'name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></select>'
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Try store them in an array and use template literal to loop over it:

let list = [AC Propulsion,Ajax,AM General,Ambassador,AMC,American,American, Underslung,Anteros Coachworks, Apollo,Apperson,Arnolt,Auburn,Aurica,Motors,Avanti,Brewster,Brisco,Brush,BXR,Carroll,Shelby,Case,Chadwick,Chandler,Checker,Comet]


row2.insertCell(count + 1).innerHTML = '<select id="sec"></select>'
list.forEach(item=>{
    document.querySelector('#sec').innerHTML +=`<option value=${item}>${item}</option>`
})

If you want to make value lower case, just use:

let list = [AC Propulsion,Ajax,AM General,Ambassador,AMC,American,American, Underslung,Anteros Coachworks, Apollo,Apperson,Arnolt,Auburn,Aurica,Motors,Avanti,Brewster,Brisco,Brush,BXR,Carroll,Shelby,Case,Chadwick,Chandler,Checker,Comet]


row2.insertCell(count + 1).innerHTML = '<select id="sec"></select>'
list.forEach(item=>{
    document.querySelector('#sec').innerHTML +=`<option value=${item.toLowerCase()}>${item}</option>`
})
about 4 years ago · Juan Pablo Isaza Report

0

You can add your values to an object and then form a string from them in a loop. This method allows you to set different key and value

var obj = {'volvo':'Volvo', 'saab':'Saab','audi':'Audi'};
var opt = '';
for (var key in obj) {
  opt += '<option value="' + key + '">' +obj[key]+ '</option>';
}
row2.insertCell(count + 1).innerHTML = '<select id="' + count2 + '"' + 
'name="cars">'+opt+'</select>'
about 4 years ago · Juan Pablo Isaza Report

0

As others have mentioned, but with a working example, I would put cars in an array. I've also used option text to generate option value, so you don't have to enter values into array.

const options = ['AC Propulsion', 'Ajax', 'AM General', 'Ambassador', 'AMC', 'American', 'American Underslung', 'Anteros Coachworks',
    'Apollo', 'Apperson', 'Arnolt', 'Auburn', 'Aurica Motors', 'Avanti', 'Brewster', 'Brisco', 'Brush', 'BXR', 'Carroll Shelby',
    'Case', 'Chadwick', 'Chandler', 'Checker', 'Comet'];

const optionsHtml = () => {
    let result = '';
    let optionValue = '';
    options.forEach(optionText => {
      optionValue = optionText.replace(/ /g, '-').toLowerCase();
      result += `<option value="${optionValue}">${optionText}</option>\n`;
    });
    return result;
}

const row2 = {
    insertCell(count) {
        const tr = document.createElement('tr');
        const td = document.createElement('td');
        td.classList.add(`td-${count}`);
        tr.appendChild(td);
        document.getElementById('test-table').appendChild(tr);
        return td;
    }
}

const count = 0;
const count2 = 1;

row2.insertCell(count + 1).innerHTML = '<select id="' + count2 + '"' + 'name="cars">' + optionsHtml() + '</select>'
<table id="test-table">
    <thead>
        <tr>
            <th>
                Car
           </th>
    </thead>
    <tbody>
    </tbody>
</table>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!