mostrar un div u otro segun select

rrecarte · #1 (**permalink**) 15/02/2010, 02:55

buenas... tengo una consulta que nos e como realizar..

seria algo asi., tengo un select (categoria) el cual muestra. auto moto camiones camionetas otros...

presiso que segun el que se elija aqui. se muestre un div u otro.. sson 3 div.. si se elije camion camionetas autos se muestre uno. si se elije moto se muestre otro y si se elije (otro) se muestre otro div, lo supe hacer pero en una forma mas fracil para otra cosa.. asi

<script type="text/javascript">

function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
var vis2 = (vis == 'block') ? 'none' : 'block';
document.getElementById(it).style.display = vis;
document.getElementById('resultado').style.display = vis2;

// agregale el atributo id al input...

}

</script>

lo cual me marcho.. pero no lo se hacer aqui. ya que no me entiendo mucho con js
tengo esta consulta

<script type="text/javascript">
var peticion = null;

function inicializa_xhr() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}

function muestraProvi() {
if (peticion.readyState == 4) {
if (peticion.status == 200) {
var lista = document.getElementById("provincia");
var provi = eval('(' + peticion.responseText + ')');

lista.options[0] = new Option("selecciona");
var i=1;
for(var codigo in provi) {
lista.options[i] = new Option(provi[codigo], codigo);
i++;
}
}
}
}

function cargaMun() {
var lista = document.getElementById("provincia");
var provincia = lista.options[lista.selectedIndex].value;
if(!isNaN(provincia)) {
peticion = inicializa_xhr();
if (peticion) {
peticion.onreadystatechange = muestraMun;
peticion.open("POST", "http://localhost/uploadveiculos/cargaMuJSON.php?nocache=" + Math.random(), true);
peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
peticion.send("provincia=" + provincia);
}
}
}

function muestraMun() {
if (peticion.readyState == 4) {
if (peticion.status == 200) {
var lista = document.getElementById("municipio");
var municipios = eval('(' + peticion.responseText + ')');

lista.options.length = 0;
var i=0;
for(var codigo in municipios) {
lista.options[i] = new Option(municipios[codigo], codigo);
i++;
}
}
}
}

window.onload = function() {
peticion = inicializa_xhr();
if(peticion) {
peticion.onreadystatechange = muestraProvi;
peticion.open("GET", "http://localhost/uploadveiculos/cargaProJSON.php?nocache="+Math.random(), true);
peticion.send(null);
}

document.getElementById("provincia").onchange = cargaMun;
}
</script>
cuando se realize onchange en la funcion muestraprovi.... segun lo que se haya elegido se tiene que mostrar un div.. muestra provi trae auto moto camineta camiones otro.. espero me puedan ayudar

rrecarte · #2 (**permalink**) 15/02/2010, 11:30

tal vez se pueda hacer desde el select option que despliega este js

es asi

<b><label for="provincia">Categoria</label>
<select id="provincia" name="categoria">
<option>Cargando...</option>
</select>

<b><label for="municipio">Marca</label>
<select id="municipio" name="marca" onChange="MostrarConsulta('/uploadveiculos/consultaupload.php'); return false">
<option>- Selecciona una Marca -</option>
</select>

la idea es que segun lo que se elija en categoria.. (el primer select option) se muestre uno o otro div.. espero alguien me pueda ayudar, no hay caso no me sale.. estoy muy cerrado con js

hector2c · #3 (**permalink**) 15/02/2010, 11:38

mm, con jquery seria muuy sencillo ._.

rrecarte · #4 (**permalink**) 15/02/2010, 11:42

dime como hacerlo porque sinceramente soy casi nulo en jquery. y la verdad no me sale... gracias che.. si me podes dar una mano te agradezco

hector2c · #5 (**permalink**) 15/02/2010, 11:47

jajaja, ahi va un ejemplo con jquery :P

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Documento sin título</title>
        <script language="javascript" type="text/javascript" src="extras/js/jquery/jquery-1.3.2.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function(){
                $(".contenido").hide();
                $("#combito").change(function(){
                $(".contenido").hide();
                    $("#div_" + $(this).val()).show();
                });
            });
        </script>
    </head>
    <body>
        <select id="combito">
            <option></option>
            <option value="1">conejos</option>
            <option value="2">gatos</option>
            <option value="3">patos</option>
        </select>
        <div id="div_1" class="contenido">
            <p>contenido para conejos</p>
        </div>
        <div id="div_2" class="contenido">
            <p>contenido para gatos</p>
        </div>
        <div id="div_3" class="contenido">
            <p>contenido para patos</p>
        </div>
    </body>
</html>

rrecarte · #6 (**permalink**) 15/02/2010, 12:01

no entendi.. porque en el option no le das nunca aviso al jquery.... y los divs aparecen todos igual modificando o no el jquery.. no me marcha no se en si no entendi el codigo

rrecarte · #7 (**permalink**) 15/02/2010, 12:19

la idea es que segun el select que se seleccione se muestre un div u otro.. pero no hay caso no doy con el tema... si bien estoy casi nulo con js.. algo e logrado pero con esto no puedo.. espero me den una mano

hector2c · #8 (**permalink**) 15/02/2010, 12:57

aver, añadiste el .js de jquery???, aqui te dejo el ejemplo..

rrecarte · #9 (**permalink**) 15/02/2010, 13:19

ok... el hecho es que no entiendo, el archivo asi como me lo muestras es uno solo??? yo lo puse en marcha asi como me lo muestras en un solo script.. por eso no entendi a lo que te refieres si añadi el js.. perodna pero es que realmente no entiendo bien como marcha. no se como es el hecho de los script.. si es que van juntos asi como me los mustras o si separas algo.. explicame bien como lo guardaria para que marche. y disculpa pero de veras estoy cerrado con js

hector2c · #10 (**permalink**) 15/02/2010, 13:24

aaaaaaam, pues uno es el framework de jquery, es un simple archivo .js, debes importarlo a tu página, osea, a la página donde desees usarlo...

si te das cuenta aqui, puedes ver el código fuente de la página, simplemente dandole click derecho y ver códigoi fuente, hay varias versiones de jquery, la actual es la 1.4, pero yo estoy usando la 1.3.2 por que soporta mas plugins...

puedes descargar el jquery que uso en este enlace

rrecarte · #11 (**permalink**) 15/02/2010, 13:32

ok. exelente... realmente no sabia sobre los jquery.. en si no sabia bien q se podian conseguir asi como asi los prototipos para usarlos... y no conozco bien donde buscar cual pra que uso.. recien comienzo a entrar al mundo js y si bien estoy aprendiendo mucho... no e alcanzado nada aun... muchas gracias por su ayuda.. de veras.

rrecarte · #12 (**permalink**) 15/02/2010, 13:45

consulta ya que me has ayudado mucho sigo molestandote..
no de veras ya que tu me distes esta solucion eres el mas indicado para decirme esto

le puedo dar a un div como esta aqui <div id="div_00" class="contenido">

mas de un valor osea div_00 div_01 div_02 porque hay 3 resultados los cuales tienen que mostrar el mismo div.

gracias nuevamente

hector2c · #13 (**permalink**) 15/02/2010, 13:49

el campo ID es único, pero el campo CLASS puede tener varios valores y pueden repetirse...

en caso desees mostrar un CLASS, debes hacerlo de este modo (hablando de jquery):

Código PHP:

  $(".div_" + $(this).val()).show();

mmmm, asi podras mostrar varios divs que tengan el mismo nombre... saludos...

rrecarte · #14 (**permalink**) 16/02/2010, 16:21

buenas... nuevamente.. sabes que no pude mostar mas de un div con el mismo nombre... no me salio.. dime como lo haces.. porque si mal no me doy cuenta. tu lo que me dijstes es igual a como mostar uno solo que en vez # pones un . y no veo como decirle el nomvbre de los divs a mostarar

rrecarte · #15 (**permalink**) 16/02/2010, 16:54

otra opcion que me sirve es darle un valor por defecto a la funcion .. como le doy un valor por defecto a esta funcion

<script language="javascript" type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".contenido").hide();
$("#provincia").change(function(){
$(".contenido").hide();
$("#div_" + $(this).val()).show();
});
});
</script>

???