Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

145
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda