Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Mostrar texto oculto según selección de una lista dependiente

Estas en el tema de Mostrar texto oculto según selección de una lista dependiente en el foro de Javascript en Foros del Web. Hola a Todos: Les cuento que ha sido de mucha ayuda para mí todo lo que aportan en las distintas consultas. He aprendido mucho y ...
  #1 (permalink)  
Antiguo 06/06/2013, 13:51
 
Fecha de Ingreso: junio-2013
Mensajes: 15
Antigüedad: 11 años, 5 meses
Puntos: 0
Pregunta Mostrar texto oculto según selección de una lista dependiente

Hola a Todos:

Les cuento que ha sido de mucha ayuda para mí todo lo que aportan en las distintas consultas. He aprendido mucho y sigo en ello, así que vamos por más!!!

Estoy necesitando destrabarme en un código.

Tengo un combobox con dos listas desplegables. Y al finalizar tengo un botón que debería mostrarme un texto oculto.

El meollo del asunto es que el texto oculto que debe mostrarse dependerá del valor seleccionado en la segunda lista desplegable.
Es decir: si selecciono España y luego Madrid, al hacer click en el botón debe mostrarme un texto oculto con información exclusiva de Madrid.


Les paso el código que generé hasta el momento donde faltaría definir lo del botón:

<html>
<head>
<title>Selects dependientes</title>
</head>

<body>

<script>
var provincias_1=new Array("Seleccione la ciudad","AndalucÃ*a","Asturias","Baleares","Canari as","Castilla y León","Castilla-La Mancha")
var provincias_2=new Array("Seleccione la ciudad","Salta","San Juan","San Luis","La Rioja","La Pampa")
var provincias_3=new Array("Seleccione la ciudad","Cali","Santamarta","Medellin","Cartagena" )
var provincias_4=new Array("Seleccione la ciudad","Aisne","Creuse","Dordogne","Essonne","Gir onde")

function cambia_provincia(){
var pais
pais = document.f1.pais[document.f1.pais.selectedIndex].value
if (pais != 0) {

mis_provincias=eval("provincias_" + pais)
num_provincias = mis_provincias.length

document.f1.provincia.length = num_provincias

for(i=0;i<num_provincias;i++){
document.f1.provincia.options[i].value=mis_provincias[i]
document.f1.provincia.options[i].text=mis_provincias[i]
}
}else{

document.f1.provincia.length = 1

document.f1.provincia.options[0].value = "-"
document.f1.provincia.options[0].text = "-"
}

document.f1.provincia.options[0].selected = true
}
</script>

<form name="f1">
<select name=pais onChange="cambia_provincia()">
<option value="0" selected>Seleccione el PaÃ*s
<option value="1">España
<option value="2">Argentina
<option value="3">Colombia
<option value="4">Francia
</select>

<select name=provincia>
<option value="-">-
</select>
</form>

<CENTER><input name="Ver Hoteles" type="button" value="Ver Hoteles" onClick=""></CENTER>


</body>
</html>
  #2 (permalink)  
Antiguo 07/06/2013, 22:26
Avatar de ggomez91  
Fecha de Ingreso: octubre-2008
Mensajes: 181
Antigüedad: 16 años, 1 mes
Puntos: 13
Respuesta: Mostrar texto oculto según selección de una lista dependiente

Hola, lo que necesitas hacer es bindear una función al onchange de tu select, esta función debe de ver el value del select y en base a eso mostrar la información relevante.
  #3 (permalink)  
Antiguo 08/06/2013, 00:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: Mostrar texto oculto según selección de una lista dependiente

Hola:

Sobre el código que tienes, si le pasas el parámetro "this" (sin entrecomillar) a la función:

onchange="cambia_provincia(this)"

Luego puedes referirte mejor a los elementos del select:

Código:
function cambia_provincia(cual){
pais = cual.value
Veo que usas el mismo select para dos cuestiones distintas... eso lía más las cosas, ya que tendrías que que discriminar los valores. De todos modos puedes crear un objeto donde el índice puede coincidir con la provincia elegida:

respuesta = {
{"Andalucía": "Comunidad autónoma española, bla, bla..."},
{"La Pampa": "Provincia Argentina bla..."},
...
}

Se refiere luego con respuesta[this.value]... aunque tu sistema veo difícil que prospere porque algunos elementos podrían repetirse (ej: "La Rioja" existe en España y Argentina...)

Cita:
Iniciado por ggomez91 Ver Mensaje
Hola, lo que necesitas hacer es bindear....
¿Eso de bindear es algo nuevo...?

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 08/06/2013, 00:45
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 12 años, 5 meses
Puntos: 127
Respuesta: Mostrar texto oculto según selección de una lista dependiente

Cita:
Iniciado por caricatos Ver Mensaje

¿Eso de bindear es algo nuevo...?

Saludos
Bindear sería (supongo), hacer bind, o sea, añadir un listener de evento a un objeto XDDD
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor
  #5 (permalink)  
Antiguo 12/06/2013, 13:48
 
Fecha de Ingreso: junio-2013
Mensajes: 15
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Mostrar texto oculto según selección de una lista dependiente

Bueno muchachos, lamentablemente soy neófito en esto y pese a que le estoy poniendo voluntad todavía no descifro los códigos fácilmente.

Ahora que les he planteado mi necesidad y que ustedes han respondido sobre lo que puedo hacer, permitanme ir preguntando por partes para aprender un poco más:


(Valga la aclaración que no manejo la terminología correctamente aún)
- Entiendo que en el evento onclick del botón debo llamar a una función. Acaso no puedo llamar directamente al value del select Provincias?


Agradezco su tiempo y espero comentarios!
  #6 (permalink)  
Antiguo 02/07/2013, 08:44
 
Fecha de Ingreso: junio-2013
Mensajes: 15
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Mostrar texto oculto según selección de una lista dependiente

Hola Gente

Bueno, les comento que encontré una solución alternativa, ya que el tema del botón escapaba a mis conocimientos por ahora.

Pero ahora tengo una nueva inquietud:

Como verán en el código, necesito mostrar hoteles en base a la ciudad que se elija, el tema es que me gustaría cargar los hoteles y sus links en un excel y que el script traiga los datos desde esa planilla. Como puedo hacerlo?

Va el código y aguardo sus comentarios. Gracias!!!!

<html>
<head></head>
<body>
<div STYLE="margin-left: 20px; margin-top: 10px">
País: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
<option>Seleccionar...</option>
<option value="España">España</option>
<option value="Francia">Francia</option>
</select><br></br>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>

<script><!--
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object(); // JS object that stores data for options

// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = 'Ciudad:';

/*
Property with options for the Seccond select list
The key in this object must be the same with the values of the options added in the first select
The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
"España": ['Madrid', 'Barcelona', 'Sevilla'],
"Francia": ['París', 'Niza', 'Burdeos']
};

/*
Property with text-content associated with the options of the 2nd select list
The key in this object must be the same with the values (options) added in each Array in "slist2" above
The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
*/
SList.scontent = {
"Madrid": '<font size="2"><br>CATALONIA GRAN VíA 4 <a href="http://www.tripadvisor.com.ar/Hotel_Review-g187514-d190157-Reviews-Catalonia_Gran_Via-Madrid.html" target="_blank"><img src="http://loginnews.com.ar/destefanis-travel/archivos/8/button001.png" width="30" heigh="12" alt="Ver Web del hotel" style="margin-left:10px" align="top"><a href="http://www.hoteles-catalonia.com/es/nuestros_hoteles/europa/espanya/madrid/madrid/hotel_catalonia_gran_via/index.jsp" target="_blank"></a><img src="http://loginnews.com.ar/destefanis-travel/archivos/6/Tripadvisor2.png" width="20" heigh="10" alt="Ver en TripAdvisor" style="margin-left:7px" align="top"></a></br><p></p>BW AROSA4<a href="http://www.tripadvisor.com.ar/Hotel_Review-g187514-d190157-Reviews-Catalonia_Gran_Via-Madrid.html" target="_blank"><img src="http://loginnews.com.ar/destefanis-travel/archivos/8/button001.png" width="30" heigh="12" alt="Ver Web del hotel" style="margin-left:10px" align="top"><a href="http://www.hoteles-catalonia.com/es/nuestros_hoteles/europa/espanya/madrid/madrid/hotel_catalonia_gran_via/index.jsp" target="_blank"></a><img src="http://loginnews.com.ar/destefanis-travel/archivos/6/Tripadvisor2.png" width="20" heigh="10" alt="Ver en TripAdvisor" style="margin-left:7px" align="top"></a><p></p></font>',
"Barcelona": 'www.marplo.net/jocuri/',
"Sevilla": 'www.marplo.net/anime/',
"París": 'coursesweb.net/php-mysql/',
"Niza": 'coursesweb.net/javascript/',
"Burdeos": 'coursesweb.net/flash/'
};

/* From here no need to modify */

// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content

if(SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if(slist == 'slist2') {
var addata = '<option>Seleccionar...</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}

document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
}
}
else if(slist == 'slist2') {
// empty the tag for 2nd select list
document.getElementById('slist2').innerHTML = '';
}
}
--></script>
</div>
</body>
</html>
  #7 (permalink)  
Antiguo 01/08/2013, 09:20
 
Fecha de Ingreso: junio-2013
Mensajes: 15
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Mostrar texto oculto según selección de una lista dependiente

Bueno gente...


No hubo muchos aportes a esto, lo mismo, después de un tiempo lo solucioné así:

http://www.forosdelweb.com/f18/base-datos-gigante-1067640/#post4480094



Gracias!

Etiquetas: dependiente, html, input, lista, oculto, según, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:21.