Cómo cargo los valores de un select, usando un array guardado en un variable?

oskuro · #1 (**permalink**) 08/06/2012, 14:24

resulta que hago una consulta a la bbdd y guardo lo que quiero en un array para poder luego "jugar" con ese array.ahora bien. lo que quiero es ahora cómo hago para cargar los option value del select, con los valores de dicho array, usando javascript. porque luego querré guardar en una variable el selectedindex para con ese valor, cargar otro select en base a lo que elijas en el primero.

pero lo que me urge es saber cómo cargo el select, teniendo ya un array con los valores a meter, usando javascript.

el array es muy facilito y sólo quiero mostrar los valores:

$Array[0][1]
$Array[1][1]
$Array[2][1]
$Array[3][1]
$Array[4][1]

emprear · #2 (**permalink**) 08/06/2012, 16:36

No sería más comodo construir el select desde el mismo php? Y que tu selecte tenga un evento onchange, que posteriormente, si con javascript, recupere el selectedIndex

Saludos

oskuro · #3 (**permalink**) 09/06/2012, 01:51

sabes lo que pasa, que estoy haciendo un proyecto y si tengo un formulario en php para que el usuario rellene datos y luego le de a enviar, no hay forma usado php y javascript, de poder hacer esto, sin tener que recargar la página por ejemplo.

Lo que quiero es por eso, no tener que hacer una consulta al servidor con la bbdd, tengo ya los 3 select metidos en 3 arrays, y ya según lo que elija el usuario en el primer select, me carga el 2º select acorde a ese option value elegido.

Pero claro, no se cómo en javascript cargar un combo select, usando un array, con php me sale, se hacer la estructura, el bucle for y tal.... pero con javascript ni idea.

sería sólo eso, cargar un array simple que tiene solamente 2 columnas y 5 registros, para que me muestre un valor(sólo tiene los campos cod_prod y denom), y quiero que me muestre denom en en select, y luego ya pues capturar la opción que elige, la guardo en otra variable, y hago otro select exactamente igual, pero meto la variable capturada en el primero para que muestre los resultados acorde a esa elección.

alguna ayudita? que fijo que es muy fácil pero claro yo no controlo javascript demasiado

IsaBelM · #4 (**permalink**) 09/06/2012, 06:35

son diversas las maneras de hacerlo

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Documento sin título</title>
<script type="text/javascript">
item = [
//africa
[
{pais: 'marruecos',
email : 'www.url.com'},

{pais: 'congo',
email : 'www.url.com'},

{pais: 'mauritania',
email : 'www.url.com'}
],

//america
[
{pais : 'mejico',
email : 'www.url.com'},

{pais : 'bolivia',
email : 'www.url.com'},

{pais : 'argentina',
email : 'www.url.com'},

{pais : 'brasil',
email : 'www.url.com'}
],

//europa
[
{pais : 'españa',
email : 'www.url.com'},

{pais : 'portugal',
email : 'www.url.com'},

{pais : 'estonia',
email : 'www.url.com'}
]
];

var almacena = [];
function fnc(it) {
if (almacena.length) almacena.splice(0,almacena.length);
var itemxpaises = [];
for (var i = 0; i < item[it].length; i++) {
itemxpaises.push({pais2: item[it][i].pais, email2: item[it][i].email});
if(itemxpaises.length) {almacena.push(itemxpaises);}
}
}

function fnc2(val) {
var objItems = document.getElementById('paises');
if (!val.length) {objItems.innerHTML = ''; return;}
objItems.innerHTML = '';
for (var i = 0; i < almacena.length; i++) {
if (almacena[0][i].pais2.substr(almacena[0][i].pais2.toUpperCase().indexOf(val.toUpperCase()), val.length).toUpperCase() == val.toUpperCase()){
objItems.innerHTML += almacena[0][i].pais2 + ' - ' + almacena[0][i].email2 + '<br />';
}
}
}
</script>
</head>
<body>
<form>
<p>Elije un continente
<select onchange="fnc(this.selectedIndex)">
<option value="">áfrica</option>
<option value="">america</option>
<option value="">europa</option>
</select>
</p>
<p>Escribe un país
<input type="text" id="txt" name="txt" onkeyup="fnc2(this.value)" />
<div id="paises"></div>
</p>
</body>
</html>