Блог

Главная - Вопросы по программированию - создание нескольких объектов SlimSelect в цикле — работает только последний объект

создание нескольких объектов SlimSelect в цикле — работает только последний объект

#javascript #html #select #slimselect

#javascript #HTML #выберите #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=Montserratamp;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>

Комментарии:

1. Можете ли вы поделиться тем, что произойдет, если вы зарегистрируете результат вызова getElementById ?

2. @evolutionxbox, я обновил приведенное выше, чтобы включить консоль. регистрируйте вызов и результаты.

3. Возможно, вы захотите опубликовать эту проблему на GitHub,

Ответ №1:

Похоже, возникла проблема с добавлением заполнителя к элементам выбора в том же цикле 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=Montserratamp;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>