时间戳

首页 > 解决方案 > 在循环中构建多个 SlimSelect 对象 - 只有最后一个对象有效

javascript - 在循环中构建多个 SlimSelect 对象 - 只有最后一个对象有效

问题描述

我正在尝试构建一个 html 列表，列表中的每个项目都有一个 SlimSelect 对象和一个多选下拉列表。但是，当我运行下面的代码时，只有最后一项处于活动状态......其他项目不起作用。我不确定为什么会这样。任何意见，将不胜感激！

<!DOCTYPE html>
<html>
<head>
    <title>Specification</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap.native@3.0.0/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>

这是 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>

标签： javascripthtmlselectslimselect

解决方案

在同一个while循环中将占位符添加到选择元素似乎存在问题。我将它移到了 while 循环之外的另一个 while 循环中，它似乎已经解决了这个问题。

<!DOCTYPE html>
<html>

<head>

</head>

<head>
  <title>Specification</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap.native@1.0.4/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>

推荐阅读