Question

I have the following code:

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

When I run the code I have a list of ten users with 10 select items but the drop-down option works only for the first user.

I’m guessing that the problem is caused by the same ID for all the users and I should use something like this but I can’t find any specific answer on the internet

Answer 1

Your ID’s need to be unique. You cannot use the same ID twice on the same page.

Give them a class instead:

<select class="select-dropdown">

Consider using jQuery as your Javascript framework rather than trying to do things yourself. It’ll save you much time and energy.

In jQuery you’ll be able to obtain all of your select elements with a simple selector:

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

You’ll also be able to get rid of your inline event attachment that you’re curently using. Attaching events in the HTML is bad practice.

Using 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
Here’s an example of getting the current select element, the old skool way: http://jsfiddle.net/G2ZuE/