Search code examples
javascripthtmlselectslimselect

building multiple SlimSelect objects in a loop - only last object works

I am trying to build a html list with each item in the list having a SlimSelect object with a multiple select dropdown. However, when i run the code below, only the last item is active... the other items do not work. I am not sure why this is happening. Any advice would be appreciated!

<!DOCTYPE html>
<html>
<head>
    <title>Specification</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-native.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.css" rel="stylesheet"></link>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </style>
</head>
<body>
<div class="container">
    <div id="wrapper">
    </div>  
</div>

<script type="text/javascript">
    buildlist()

    function buildlist(){
        var wrapper = document.getElementById('wrapper')
        var i = 0 
        while(i < 6){
            var item = `<div class="col-2" id="value-${i}">
                            <select id="selector-${i}" multiple>
                                <option value="one">one</option>
                                <option value="two">two</option>
                                <option value="three">three</option>
                                <option value="four">four</option>
                            </select>
                        </div>
                        `
            wrapper.innerHTML += item
            console.log(document.getElementById(`selector-${i}`))
            new SlimSelect({
                select: document.getElementById(`selector-${i}`), 
                placeholder: 'Placeholder Text Here'
            })
            i++
        }   
    }



</script>

</body>
</html>

Here are the console logs for getElementbyId

<select id="selector-0" multiple="" tabindex="-1" data-ssid="ss-74017" style="display: none;">
                                <option value="one">one</option>
                                <option value="two">two</option>
                                <option value="three">three</option>
                                <option value="four">four</option>
                            </select>
<select id="selector-1" multiple="" tabindex="-1" data-ssid="ss-56902" style="display: none;">
                                <option value="one">one</option>
                                <option value="two">two</option>
                                <option value="three">three</option>
                                <option value="four">four</option>
                            </select>
<select id="selector-3" multiple="" tabindex="-1" data-ssid="ss-49140" style="display: none;">
                                <option value="one">one</option>
                                <option value="two">two</option>
                                <option value="three">three</option>
                                <option value="four">four</option>
                            </select>
<select id="selector-4" multiple="" tabindex="-1" data-ssid="ss-9415" style="display: none;">
                                <option value="one">one</option>
                                <option value="two">two</option>
                                <option value="three">three</option>
                                <option value="four">four</option>
                            </select>
<select id="selector-5" multiple="" tabindex="-1" data-ssid="ss-38661" style="display: none;">
                                <option value="one">one</option>
                                <option value="two">two</option>
                                <option value="three">three</option>
                                <option value="four">four</option>
                            </select>
Solution

  • It seems to have an issue adding the placeholder to the select elements within the same while loop. I moved it outside the while loop into another while loop and it seems to have fixed the issue.

    <!DOCTYPE html>
<html>

<head>

</head>

<head>
  <title>Specification</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-native.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.css" rel="stylesheet"></link>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  </style>
</head>

<body>
  <div class="container">
    <div id="wrapper">

    </div>
  </div>



</body>

<script type="text/javascript">
  buildlist()

  function buildlist() {
    var wrapper = document.getElementById('wrapper')
    wrapper.innerHTML = "";
    var i = 0
    while (i < 6) {
      var item = `<div class="col-2" id="value-${i}">
                            <select id="selector-${i}" multiple>
                                <option value="one">one</option>
                                <option value="two">two</option>
                                <option value="three">three</option>
                                <option value="four">four</option>
                            </select>
                        </div>`

      wrapper.innerHTML += item

      i++
    }
    i = 0
    while (i < 6) {
      new SlimSelect({
        select: document.getElementById(`selector-${i}`),
        placeholder: 'Placeholder Text Here'
      })
      i++
    }
  }
</script>

</body>

</html>