JavaScript 用于具有相同 id 的对象

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 个用户的列表，其中包含 10 个选择项，但下拉选项仅适用于第一个用户。

我猜测问题是由所有用户的相同 ID 引起的，我应该使用类似 this 的内容，但我在互联网上找不到任何具体答案

Answer 1

您的 ID 必须是唯一的。您不能在同一页面上两次使用相同的 ID。

给他们上一堂课：

<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.
    });

更新
这是获取当前选择元素的示例，旧的 skool 方式： http://jsfiddle.net/G2ZuE/

Answer 2

你不能将相同的ID分配给不同的html元素，你可以在选择的ID上附加一个后缀，并通过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 3

你的猜测是正确的。此外，您应该将事件处理放在 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>";
        }
      }
    }

我希望这会有所帮助。