Jquery appends dropdown data incorrectly

Question

I have dropdown in my form which has a CSS style defined on pageload and is hidden and the code is like

Run code snippetExpand snippet I am able to successfully append the options to this drop down, however they get inserted to a drop down without my CSS style as shown in the below image After the data is added to drop down the HTML looks like Run code snippetExpand snippet and the JQuery code looks like and the targetdropdown value would be "City" here and the Id and values appropriately $("div#City").toggle(); $('select[name="'+targetdropdown+'"]').empty(); jQuery('select[name="'+targetdropdown+'"]'). append(' --Select '+targetdropdown+'-- '); $.each(res[0],function(index, element) { var newOption = ''+element.Name+' '; jQuery('select[name="'+targetdropdown+'"]'). append(newOption); }); Can you please help me resolve the data being inserted to CSS styled drop down which is empty as you can see in the image JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

It seems you are using SelectBoxIt jQuery plugin for Custom styled dropdown list. When you done adding dynamic option to your div call .refresh() method. Add below line at the end of your javascript code. $('select[name="'+targetdropdown+'"]').data("selectBox-selectBoxIt").refresh();