Facing Issue with selectmenu
I have fighting with this issue for a while. Dynamically creating a selectmenu object, displays strangely on both android and wp8. It shows up with two boxes - one inside another, with two select icons (attached screenshot). You can select from both the boxes and it ends up displaying separate values. Code snippet below:
//-----------------------------------------------------------------------
var l = document.createElement("select");
l.id = "alist";
l.setAttribute("data-native-menu","true");
l.setAttribute("data-mini","true");
l.className = "select";
l.setAttribute("data-filter","true");
//First list option
var listOption = new Option();
listOption.text = "desc1";
listOption.label = "desc1"
listOption.value="1";
if(isIE()){
elem.add(listOption);
}else{
elem.add(listOption,null);
}
//Second option
var listOption = new Option();
listOption.text = "desc2";
listOption.label = "desc2"
listOption.value="2";
if(isIE()){
l.add(listOption);
}else{
l.add(listOption,null);
}
//parentElem = element of container div
parentElem.className="ui-field-contain";
parentElem.appendChild(l);
//-----------------------------------------------------
//Initiator
$(".select").selectmenu({hidePlaceholderMenuItems: true,preventFocusZoom: true}).on('selectmenuchange',function() {closeSelectMenu(this);});
//-------------------------------------------------------------------
Any help appreciated