How can I autopopulate selection list in javascript?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>`
})

CodePudding user response：

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