Ver Mensaje Individual
  #6 (permalink)  
Antiguo 02/07/2013, 08:44
dtmayorista
 
Fecha de Ingreso: junio-2013
Mensajes: 15
Antigüedad: 10 años, 10 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>