具有相同 id 的对象的 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 个选择项的 10 个用户的列表，但下拉选项仅适用于第一个用户。

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

Answer 1

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

改为给他们上课:

<select class="select-dropdown">

考虑使用 jQuery as your Javascript framework而不是尝试自己做事。它将为您节省大量时间和精力。

在 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/