Tengo algunos problemas cuando cargo datos en un combobox. Tengo una aplicación html5, donde todos mis objetos son objetos jquery mobile.
En este caso, tengo un combobox que se llena con los datos que obtengo de mi base de datos, a través de un servicio REST que me devuelve los datos en formato json.
Para cargar mis datos en el combobox, lo hago en una función javascript, utilizando $.getJSON, y en la función que recibe los datos, armo un string con el código html del combobox, y coloco en el div este string mediante document.getElementById('div1').innerHTML = html
Con ello, el combo se carga, pero pierde todas las propiedades de jquery mobile. es decir, obtengo este combo
, en lugar de este 
.Saben a que se debe esto?
mi función en javascript es la siguiente
Código:
function cargarCboUsuarios() {
var cmb = "selectmenu1";
$.getJSON("http://midominio.net/servicios/json/listaUsuarios.php?jsoncallback=?", function(data) {
$("#selectmenu1").html('');
var ni = document.getElementById('selectUser');
var newdiv = document.createElement('div');
var divIdName = 'selectmenu1';
newdiv.setAttribute('id',divIdName);
var html = '<label for="selectmenu1">Usuario:</label><select data-native-menu="false" name="selectmenu1" id="selectmenu1" data-theme="b"><option value="option1">Seleccione</option>';
$.each(data, function(i, item) {
html = html + '<option value="'+item.login+'">'+item.login+'</option>';
});
html = html + '</select>';
document.getElementById('selectUser').innerHTML = html;
ni.appendChild(newdiv);
});
}
y mi codigo html es el siguiente:
Código HTML:
<body on onLoad="cargarCboUsuarios()"> <div data-role="page" data-theme="b" id="page1"> <div data-theme="b" data-role="header"> <h3> Cor Processu Mobile </h3> </div> <div data-role="content"> <div style=" text-align:center"> <img style="width: 410px; height: 100px" src="http://assets.codiqa.com/ps/14440/91e66af46c684ea8MOBILE.JPG" /> </div> <div class="ui-grid-a"> <div class="ui-block-a"> </div> <div class="ui-block-b"> </div> </div> <div data-role="fieldcontain" id="selectUser"> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput2"> Clave: </label> <input id="textinput2" placeholder="" value="" type="password" /> </fieldset> </div> <a data-role="button" data-transition="fade" href="" class="login"> Login </a> </div> <div data-theme="b" data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li> <a href="#page1" data-theme="" data-icon=""> home </a> </li> </ul> </div> </div> </div> </body>
Gracias.
