Dynamically (programatically) add new options to dropkick <select> tag in jQuery

Question

I am trying to dynamically add options to select tag in jQuery. This jQuery code below works fine.

select.append("<li>opt4</li>");

However, when I hover over options, it doesn't highlight any of options and when I select one option, it doesn't change the selected option.

Answer 1

To dynamically add options to the select, you should do as follows:

$(document).ready(function(){
    var select = new Dropkick("#dropdown");
    select.add("New Option", 2);
}); 

Here is the reference documentation