JavaScript для объектов с одинаковым идентификатором

Question

У меня есть следующий код:

HTML:

//forLoop (users)
    <b>UserName</b>
    <select id = "select-dropdown" onclick="showOptions()">
    </select>
//endof forLoop

JavaScript:

function showOptions(){
var select = document.getElementById("select-dropdown");
var response = "option__option";

var optionList = response.split("__");
var size = optionList.length;

for(i = 0; i < size; i++){
    select.innerHTML += "<option>" + optionList[i] + "</option>";
}
}

Когда я запускаю код, у меня появляется список из десяти пользователей с 10 выбранными элементами, но выпадающий список работает только для первого пользователя.

Я предполагаю, что проблема вызвана тем же идентификатором для всех пользователей, и я должен использовать что-то вроде this , но я не могу найти какой-либо конкретный ответ в Интернете

Answer 1

Вы не можете присвоить один и тот же идентификатор различным элементам HTML, вы можете добавить суффикс к выбранному идентификатору и циклически их префикс ID или общий класс CSS (и если вы можете использовать библиотеку, такую ​​как JQuery или MooTools, это определенно будетболее просто).

См. здесь для примера реализации чистого javascript .

var users = document.getElementById("users"); 
var dpDowns = users.getElementsByTagName("select"); 
for (var i = 0; i < dpDowns.length; i++) { 
    //alert(dpDowns[i].id);
}

Answer 2

Ваше предположение было верным. Кроме того, вы должны поместить обработку событий в JS, а не в HTML. Следующий код должен сделать это.

HTML:

    <select class="someClass">
    </select>

    <select class="someClass">
    </select>

    <select class="someClass">
    </select>

JavaScript

    // grab selects
    var selects = document.getElementsByClassName("someClass");
    var optionsAsString = "option__option";
    var options = optionsAsString.split("__");
    for(var i = 0; i < selects.length; i++) {
      selects[i].onclick = function() {
        // clear initally
        this.innerHTML = "";
        var select = this;
        for(var j = 0; j < options.length; j++) {
          this.innerHTML += "<option>" + options[j] + "</option>";
        }
      }
    }

Надеюсь, это поможет.

Answer 3

Ваш идентификатор должен быть уникальным. Вы не можете использовать один и тот же идентификатор дважды на одной странице.

Вместо этого дайте им класс:

<select class="select-dropdown">

Попробуйте использовать jQuery в качестве основы Javascript , а не пытаться делать что-то самостоятельно. Это сэкономит вам много времени и энергии.

В jQuery вы сможете получить все выбранные элементы с помощью простого селектора:

var selectElements = $('.select-dropdown');

Вы также сможете избавиться от вложенного вложения, которое вы сейчас используете. Вложение событий в HTML - плохая практика.

Использование jQuery:

    $('.select-dropdown').click(function(){
       // This refers to the dropdown that is currently clicked.
       var currentSelect = $(this); 

       // Code here that executes when the dropdown is clicked.
    });

UPDATE Вот пример получения текущего элемента select, старого способа skool: http://jsfiddle.net/G2ZuE/