Cambiar SELELCT html con JS

[kolmy10]

Bueno mi duda es muy simple.

tengo un select en html de este estilo

<select name="cantidad" id="cantidad">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>

Cuando elijo el 1, otro select tiene que llenarse una lista proveniende de mi base de datos, y lo mismo cuando elijo el 2.




Ya tengo implementado ajax en la misma pagina, el problema no es traer los datos sino meterlos en el SELECT CON JS.






los datos que traigo son listas codigo/descripcion de mas de 50 elementos.

[caricatos]

Hola:

Si desde el principio el select está vacío, basta con repetir el método appendChild por cada option que quieras añadir, asignando los atributos value y text.

Saludos

[kolmy10]

Podrias ponerme un ejemplo?

El tema es que el PHP del AJAX me devuelve un array, como meto un appendChild por cada valor del array?

[Alexis88]

Siguiendo estos pasos:

1. En cada iteración (cada vuelta del bucle con el que recorrerás al array), creas una nueva opción de esta forma: document.createElement("option").
2. Asignas la opción creada a una variable y mediante las propiedades innerHTML y value, le asignas el texto que se mostrará para esa opción en la lista y el valor que representará.
3. Finalmente, añades esa opción a la lista de esta forma: tuSelect.appendChild(laOpcion).

Saludos

[caricatos]

Hola:

Se puede usar innerHTML, pero también text...

Saludos

[Alexis88]

Estimado caricatos:

Si te refieres a la propiedad innerText, es necesario señalar que no es compatible con Firefox, por lo que en su lugar debe de usarse la propiedad textContent, pero como esta última solo es compatible con IE9+, es preferible usar la propiedad innerHTML.

Saludos

[kolmy10]

mmmm, voy a tener que tomarme un dia para probarlo, espero que funcione.

Muchisimas gracias :D

[caricatos]

Hola:

Iniciado por Alexis88

Estimado caricatos:

Si te refieres a la propiedad innerText, es necesario señalar que no es compatible con Firefox, por lo que en su lugar debe de usarse la propiedad textContent, pero como esta última solo es compatible con IE9+, es preferible usar la propiedad innerHTML.

Saludos

Alguien se ha inventado algo... el tag option referencia el contenido el atributo text (sin el inner)... es más, antes de usarse tanto el DOM, se creaban objetos "option", igual que objetos Image y otros... En mi último apunte: Etiquetando mapa SVG, mirando el código, uso estas líneas:

Código Javascript:

function _formar_(_i_, forma)    { 
    _op_ = document.createElement("option"); 
    _op_.text = "forma_" + _i_ + " - (" + forma + ")"; 
    _op_.value = "forma_" + _i_; 
    tag("selector").appendChild(_op_); 
}
 

No quise poner antes el código porque es parte de algo más complejo...

Saludos

[Alexis88]

Antes de responder, busqué dicha propiedad en la página de Quirksmode (la cual me parece bastante respetable) y no la encontré, por eso dije eso, nadie está inventando cosas.

Saludos

[kolmy10]

realmente no pude implementarlos, necesitaria un ejemplo mas grafico de la primer respuesta que me dieron,

es que nose si estoy ubicando bien los resultados.

[Alexis88]

¿Y qué tal si mejor nos muestras lo que has hecho y te ayudamos a partir de eso? No esperes a que te hagamos todo pues eso no va a suceder.

Saludos

[caricatos]

Hola:

Como para empezar...

Iniciado por kolmy10

Podrias ponerme un ejemplo?

El tema es que el PHP del AJAX me devuelve un array, como meto un appendChild por cada valor del array?

Ajax nunca devuelve un array, ya que solo existe responseXML y responseText... yo prefiero la respuesta XML, aunque es más popular el texto plano, así que sea lo que sea lo que recibes, ¿como consigues un array? ...

Paso a paso será más fácil...

Saludos

[Alexis88]

Algo me dice que lo que recibe es un objeto JSON, pero solo kolmy10 nos puede sacar de la duda.

[caricatos]

Hola

Iniciado por Alexis88

Algo me dice que lo que recibe es un objeto JSON...

O sea texto plano (responseText), o código json dentro de un tag XML (responseXML)...

Porque destripando objetos Ajax no existe "responseJSON"

Saludos

[Alexis88]

Claro, solo habría que parsear la respuesta.

Código Javascript:

JSON.parse(xhr.responseText);
 

Saludos

[kolmy10]

Código Javascript:

function ObtenerLista(texto)
{
    //jQuery
    $.ajax({
        type: "POST",
        url: "listas.php",
        data: {
            lista:  texto
        }
    }).done(function(respuesta) {
            
 
 
            
        });
}
 

La variable "respuesta" me devuelve los datos asi


unodostrescuatrocincoseissiete

Si lo ven, me devuelve todas lasvariables juntas, pegadas una a la otra.

Como deberia tratarla para meter todo en una lista HTML?

[Panino5001]

Creo que deberías replantear el archivo listas.php para que devuelva un xml o una cadena JSON o, al menos, una cadena de caracteres unidas con un separador (una coma, por ejemplo), porque si no, decinos: ¿con qué criterio separamos los valores que estás mostrando?

[kolmy10]

Bueno, es un for en PHP, puedo agregarle una coma al final de cada iteracion y problema resuelto.

El tema es, como deberia devolver los datos? separados por coma? y si es asi, como los trato para meterlos en un select a todos?

Listas.php me devuelve lo que yo quiera y de la forma que yo quiera, el tema es que no se que me conviene.

[caricatos]

Hola:

Iniciado por kolmy10

Bueno, es un for en PHP, puedo agregarle una coma al final de cada iteracion y problema resuelto...

Listas.php me devuelve lo que yo quiera y de la forma que yo quiera, el tema es que no se que me conviene.

Los lenguajes de programación (web), en nuestro caso, javascript y php, nos proporcionan primitivas que son muy útiles... infórmate sobre explode/implode en php y split/join en javascript...

No es tan difícil.

Por cierto, $.ajax no es javascript nativo, y por lo que veo se trata de jQuery, y aunque tu problema parece ser del servidor, movemos el tema a la librería que usas...

Saludos

[Panino5001]

Un ejemplo para que adaptes:

Código PHP:

  <?php 
if(isset($_GET['loquesea']) && ($_GET['loquesea']==1 || $_GET['loquesea']==2) ){ 
    $opciones=array('',array('uno','dos','tres'),array('cuatro','cinco','seis')); 
    echo implode(',',($opciones[intval($_GET['loquesea'])])); 
    exit; 
} 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>ejemplo</title> 
<script> 
function http(){ 
    if(typeof window.XMLHttpRequest!='undefined'){ 
        return new XMLHttpRequest();     
    }else{ 
        try{ 
            return new ActiveXObject('Microsoft.XMLHTTP'); 
        }catch(e){ 
            alert('Su navegador no soporta AJAX'); 
            return false; 
        }     
    }     
} 
 
function cambiar(el){ 
    document.getElementById('slave').innerHTML=''; 
    var h=new http; 
    if(!h)return; 
    h.open('get','<?php echo basename($_SERVER['PHP_SELF']) ?>?loquesea='+el.value+'&'+(+(new Date())),true); 
    h.onreadystatechange=function(){ 
        if(h.readyState==4 && h.status == 200){ 
            var r=h.responseText.split(','); 
            var fragment=document.createDocumentFragment(), tmp; 
            for(var i=0,l=r.length;i<l;i++){ 
                tmp=document.createElement('option'); 
                tmp.value=tmp.text=r[i]; 
                fragment.appendChild(tmp); 
            } 
            document.getElementById('slave').appendChild(fragment); 
            h.onreadystatechange=function(){} 
            h.abort(); 
            h=null; 
        } 
    } 
    h.send(null); 
} 
onload=function(){cambiar(document.getElementById('master'));}; 
</script> 
</head> 
<body> 
<select name="cantidad" id="master" onchange="cambiar(this)"> 
<option value="1"> 1 </option> 
<option value="2"> 2 </option> 
</select> 
<select id="slave"> 
 
</select> 
</body> 
</html>  

[Alexis88]

Iniciado por kolmy10

El tema es, como deberia devolver los datos? separados por coma? y si es asi, como los trato para meterlos en un select a todos?

Podrías formar un array con los datos, codificarlo en formato JSON y devolver dicho objeto. Luego, en el código JS, iteras sobre el objeto y, en cada iteración, creas opciones y las añades a la lista.

Código PHP:

$array = array('uno', 'dos', 'tres', 'cuatro', 'cinco', 'seis', 'siete');
echo json_encode($array);
 

Código Javascript:

function ObtenerLista(texto){
    $.ajax({
        type: "POST",
        url: "listas.php",
        dataType: "JSON",
        data: {
            lista: texto
        }
    }).done(function(respuesta){
        $.each(respuesta, function(index, value){
            $("#idSelect").append($("<option value = '" + value + "'>" + value + "</option>"));            
        });
    });
}
 

Saludos