Problema al agregar opciones a un select

mtoledo · #1 (**permalink**) 25/05/2012, 14:59

Hola,

Estoy recuperando datos de un servidor remoto por medio de jsonp, y cuando quiero agregar los datos a un select, no me funciona. Este es mi código

Código:

<script>
		function cargarCbo() {
			var cmb = "selectmenu1";
			
			$.getJSON("http://midominio.net/servicios/json/listaUsuarios.php?jsoncallback=?", function(data) {
				$("#"+cmb).html('');
				$.each(data, function(i, item) {
					$("#"+cmb).append('<option value="'+item.login+'">'+item.login+'</option>');
				});
			});
		}
</script>

</head>
    <body  onload="cargarCboUsuarios()">
     div data-role="page" data-theme="b" id="page1">
            <div data-theme="b" data-role="header">
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <label for="selectmenu1">
                        Usuario:
                    </label>
                    <select data-native-menu="false" name="selectmenu1" id="selectmenu1" data-theme="b">
                        <option value="option1">
                            Seleccione
                        </option>
                    </select>
                </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="#page2">
                    Login
                </a>
            </div>
            <div data-theme="b" data-role="footer" data-position="fixed">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

...

Alguien tiene alguna idea de que pueda estar fallando, y de como puedo solucionarlo?

Gracias

maycolalvarez · #2 (**permalink**) 25/05/2012, 20:18

No recuerdo exactamente la causa, pero el hecho es que la forma que usas para armar la estructura del select no funciona en algunos navegadores, IE por ejemplo.

La forma más común de hacerlo es concatenando la estructura completa html del select incluyendo <select></select> en una variable y asignarlo al innerHTML (.html() para jquery) de una capa (div), no es la forma más eficiente, pero que funciona en todos los casos

mtoledo · #3 (**permalink**) 29/05/2012, 13:08

Hola maycolalvarez,

Gracias por tu ayuda, pero he probado lo que me sugeriste y no me funciona del todo bien. Si muestra el combo con los datos recuperados por el servicio, pero no muestra el combo con el estilo del ccs de mi web. Sabes a que se debe esto?

Gracias

maycolalvarez · #4 (**permalink**) 29/05/2012, 13:21

debes de agregarle los atributos propios del FW que estás usando, como éste: data-native-menu="false", eso no es parte de HTML, pero me imagino que el FW lo utiliza, por lo tanto creo que deberías utilizar la API que te provee para hacer el select