具有相同id的对象的JavaScript

我有以下代码：

HTML:

//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>";
}
}

函数showOptions（）{
var select=document.getElementById（“选择下拉菜单”）；
var response=“option\uuuu option”；
var optionList=响应。拆分（“”）；
变量大小=optionList.length；
对于（i=0；i

当我运行代码时，我有一个10个用户的列表，其中有10个选择项，但下拉选项仅适用于第一个用户

---

我猜这个问题是由所有用户的相同ID引起的，我应该使用类似的方法，但我在互联网上找不到任何具体的答案。不能在同一页上两次使用同一ID

给他们上课：

<select class="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.
    });

更新

---

下面是一个获取当前select元素的示例，即旧的skool方法：

您不能将同一个ID分配给不同的html元素，您可以在select ID上附加一个后缀，并按ID前缀或公共css类循环它们（如果您可以使用JQuery或MooTools之类的库，那么肯定会更简单）

看

var users=document.getElementById（“用户”）；
var dpDowns=users.getElementsByTagName（“选择”）；
对于（var i=0；i

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

//抓取选择
var selects=document.getElementsByClassName（“someClass”）；
var options asstring=“option\uu option”；
var options=期权组合拆分（“_u;”）；
对于（变量i=0；i

---

我希望这能有所帮助。

同一html页面中不能有多个ID相同的元素。如果您有类似的情况，您引用这些元素的脚本可能无法正常工作。谢谢！我知道jQuery，但出于某种原因，我正试图用JavaScript实现这一点。假设我将使用一个类。在这种情况下，我如何在指定的innerHTML中插入一些代码而不使用GetElementByClass呢？正如您所做的那样，您已经可以通过this关键字访问select元素了。你不需要再在页面上找到它。

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

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

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

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

    // 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>";
        }
      }
    }