文章/答案/技术大牛

发布

社区首页 >问答首页 >在一个循环中构建多个SlimSelect对象-只有最后一个对象有效

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

Stack Overflow用户

提问于 2020-10-11 07:34:25

回答 1查看 170关注 0票数 1

我正在尝试建立一个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>

javascript

html

select

slimselect

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-11 08:35:43

在同一个while循环中，将占位符添加到select元素似乎有问题。我把它从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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64299299

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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