Question

Looks like i have a strange problem. I’m creating a select menu and assigning it to some plugin named select menu

$('#selectCombo').selectmenu({style:'dropdown'});

After assigning it to it.. I couldn’t hide it, or set an option as selected. I tried this

$('<option value='+ret.cId+' selected=true>'+ret.cName+'</option>').appendTo('#selectCombo');   
    $('#selectCombo').selectmenu({style:'dropdown'});   

Its working but it is showing another instance of dopdown below the original one. I tried removing class attribute but it hasn’t worked. Is there any way.. plz help

Answer 1

Custom Select Menus normally create a <div> structure of the original <select> element to allow custom styling.

That means that the custom select menu won’t know about the changes you’ve made to the original <select>.

Call .selectmenu('destroy') before calling .selectmenu({style: 'dropdown'}); again.

i.e.

var newOption = $('<option value='+ret.cId+' selected=true>'+ret.cName+'</option>');
$('#selectCombo').append(newOption).selectmenu('destroy').selectmenu({style:'dropdown'});

Here’s an example.