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个选项的十个用户的列表，但下拉选项仅适用于第一个用户。

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

Answer 1

您的身份证必须是独一无二的。您不能在同一页面上两次使用相同的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/

Answer 2

你不能为不同的html元素分配相同的ID，你可以在选择ID后加一个后缀，然后按ID前缀或普通的css类循环它们（如果你可以使用像JQuery或MooTools这样的lib，它肯定会是更直接）。

请参阅here for a pure-javascript sample implementation。

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

我希望这会有所帮助。

具有相同ID的对象的JavaScript

3 个答案: