Adding on click functionality to a dynamically created dropdown list

Question

I have a function that creates a dropdown list from an array

function populateDropdown(){
var select = document.getElementById("dropdownList");
    var array = ["1", "2", "3"];
        for(var i =0; i < array.length; i++)
        {
        var opt = array[i]
        var ele = document.createElement("option");
        ele.textContent = opt;
        ele.value = opt;
        select.appendChild(ele);
        }
    }

With the following HTML:

<select id = "dropdownList">
        <option> Choose a vendor </option>
    </select>

I have a javascript function that will change the web page's functionality based on which dropdown item is being used. The new_vendor should be the name of the dropdown item, in this case either "1", "2", or "3".

function changeVendor(new_vendor)

How would I add something like an onClick to the dynamic dropdown and call the changeVendor function with that item name?

Maciej Sikora · Accepted Answer · 2016-09-13 13:59:49Z

3

Use change event on select:

document.querySelector("#dropdownList").addEventListener("change",function(e){
   //here code for change option

   changeVendor(this.value);// in this.value is current value of select
});

Standard binding will work because select is on page from beginning ( DOM load ), only options are added dynamically, but this have no meaning for select change event.

edited Sep 13, 2016 at 13:59

answered Sep 13, 2016 at 13:54

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leonid Doroshenko · Accepted Answer · 2016-09-13 14:02:10Z

2

You can attach event handler to parent element, and get information about clicked element from event object.

var select = document.getElementById("dropdownList");
select.addEventListener('click', function(event){
    var opt = event.target.innerText;
    changeVendor(opt);
})

answered Sep 13, 2016 at 14:02

Leonid Doroshenko

364 bronze badges

2 Comments

Maciej Sikora Over a year ago

Click event should not be used in select, second click on the same option will run the code, clicking os select without chosing option also will call this callback. Next thing all Your code inside callback has no sense, everything is in select without entering options, so this.value give as value.

Leonid Doroshenko Over a year ago

@MaciejSikora You are right about this.value. Not sure about browser support of 'change' event though, but I like your suggestion.

Collectives™ on Stack Overflow

Adding on click functionality to a dynamically created dropdown list

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related