create a dynamic select list with a default value in JavaScript

Question

I wan't to create a dynamic drop down menue, with default selected values. Creating from the dropdown menu works fine, but when I set the default value, that isn't working. The default value was set only for the last dropdown. I have to create a example:

let brand = [{
    "brand": "audi"
  },
  {
    "brand": "mercedes"
  }

]
$(document).ready(function() {
  createTableBody()
})

function createTableBody() {
  var table = document.getElementById('myTable')
  for (var i = 0; i < 5; i++) {
    var row = `<tr>
                    <td>${i}</td>
                    <td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
               </tr>`
    table.innerHTML += row
    createDropdown(brand, i)
  }
}

function createDropdown(data, x) {
  var selectList = document.getElementById('brand' + x)
  //create and insert from the option element
  for (var i = 0; i < data.length; i++) {
    var option = document.createElement("option")
    option.value = data[i].brand
    option.text = data[i].brand
    selectList.appendChild(option)
  }
  console.log(selectList)
  selectList.value = "mercedes"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th data-column="id" data-order="desc">ID</th>
      <th data-column="brand" data-order="desc">Brand</th>
    </tr>
  </thead>
  <tbody id="pabBody">

  </tbody>
</table>

@KlausM. I think the problem is with table.innerHTML += row — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Apr 29, 2021 at 9:26

fdomn-m · Accepted Answer · 2021-04-29 09:35:12Z

The issue is with

table.innerHTML += row;

this is the same as

table.innerHTML = table.innerHTML + row;

and taking the .innerHTML of an element takes only the HTML, not the currently selected values.

You can fix this by appending HTML rather than replacing the HTML, eg (as tagged jquery)

$(table).append(row);

this will leave all the existing selected values as they are as they are not being replaced.

let brand = [{
    "brand": "audi"
  },
  {
    "brand": "mercedes"
  }

]
$(document).ready(function() {
  createTableBody()
})

function createTableBody() {
  //var table = document.getElementById('myTable')
  var table = $("#myTable");
  for (var i = 0; i < 5; i++) {
    var row = `<tr>
                    <td>${i}</td>
                    <td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
               </tr>`
    //table.innerHTML += row
    table.append(row);
    createDropdown(brand, i)
  }
}

function createDropdown(data, x) {
  var selectList = document.getElementById('brand' + x)
  //create and insert from the option element
  for (var i = 0; i < data.length; i++) {
    var option = document.createElement("option")
    option.value = data[i].brand
    option.text = data[i].brand
    selectList.appendChild(option)
  }
  console.log(selectList)
  selectList.value = "mercedes"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th data-column="id" data-order="desc">ID</th>
      <th data-column="brand" data-order="desc">Brand</th>
    </tr>
  </thead>
  <tbody id="pabBody">

  </tbody>
</table>

An alternative would be to build your select options at the same time as you build your select. Or build all your HTML in the same way you build your select options (document.createElement("tr") etc)

thanks for the detailed explenation my friend. This solve my Problem ;)

Carsten Løvbo Andersen · Accepted Answer · 2021-04-29 09:31:53Z

You could do it like this:

function createTableBody() {
  var table = document.getElementById('myTable')
  for (var i = 0; i < 5; i++) {
    var row = `<tr>
                    <td>${i}</td>
                    <td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
               </tr>`
    table.innerHTML += row
  }
  createDropdown()
}

function createDropdown() {
  var selectList = document.querySelectorAll('select[id^=brand]')
  //create and insert from the option element
  for (var j = 0; j < selectList.length; j++) {
    for (var i = 0; i < brand.length; i++) {
      var option = document.createElement("option")
      option.value = brand[i].brand
      option.text = brand[i].brand
      selectList[j].appendChild(option)
    }
    selectList[j].value = "mercedes"
  }
  console.log(selectList)
}

I believe the problem was that you updated the innerhtml multiple times, so I think it was resetting the selected values of the past selects

Demo

let brand = [{
    "brand": "audi"
  },
  {
    "brand": "mercedes"
  }

]
$(document).ready(function() {
  createTableBody()
})

function createTableBody() {
  var table = document.getElementById('myTable')
  for (var i = 0; i < 5; i++) {
    var row = `<tr>
                    <td>${i}</td>
                    <td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
               </tr>`
    table.innerHTML += row
  }
  createDropdown()
}

function createDropdown() {
  var selectList = document.querySelectorAll('select[id^=brand]')
  //create and insert from the option element
  for (var j = 0; j < selectList.length; j++) {
    for (var i = 0; i < brand.length; i++) {
      var option = document.createElement("option")
      option.value = brand[i].brand
      option.text = brand[i].brand
      selectList[j].appendChild(option)
    }
    selectList[j].value = "mercedes"
  }
  console.log(selectList)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th data-column="id" data-order="desc">ID</th>
      <th data-column="brand" data-order="desc">Brand</th>
    </tr>
  </thead>
  <tbody id="pabBody">

  </tbody>
</table>

Marios Nikolaou · Accepted Answer · 2021-04-29 10:31:25Z

1

When all select elements are added to DOM set default value to mercedes.

Just add line of code

$('.brand').val('mercedes');

after createTableBody()

OR

I modified your code to a more efficient one.

let brand = [{
    "brand": "audi"
  },
  {
    "brand": "mercedes"
  }

]
$(document).ready(function() {
  createTableBody();
})

function createTableBody() {
  var table = document.getElementById('myTable');
  for (var i = 0; i < 5; i++) {
   const selectStr = `<tr>
                      <td>${i}<td>
                      <td>
                      <select class='brand' id='brand${i}'>
                        <option value=''>Please select ....</option>
                        ${brand.map(x => `<option value=${x.brand} ${x.brand === 'mercedes' ? 'selected' : null}>${x.brand}</option>`)}
                     </select>
                     </td>
                     </tr>`;

   table.insertAdjacentHTML("beforeend",selectStr);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th data-column="id" data-order="desc">ID</th>
      <th data-column="brand" data-order="desc">Brand</th>
    </tr>
  </thead>
  <tbody id="pabBody">

  </tbody>
</table>

edited Apr 29, 2021 at 10:31

answered Apr 29, 2021 at 9:39

Marios Nikolaou

1,3361 gold badge15 silver badges27 bronze badges

1 Comment

Marios Nikolaou Over a year ago

Check my updated answer it's a smaller solution to your problem.

Collectives™ on Stack Overflow

create a dynamic select list with a default value in JavaScript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related