I would like to know how I can show divs that depend on two select and a submit button. The problem I have is that the second selection varies depending on what is chosen in the first, so I do not know how I can show different divs according to the variables that have the select.
I appreciate the help and this is the code:
//Efecto del botón---------------------------------------------------------------
var e = document.getElementById('open-button');
e.addEventListener('click', function() {
if (this.className == 'on') this.classList.remove('on');
else this.classList.add('on');
});
//Código para abrir el menu----------------------------------------------------------
$('nav').hide();
$("#open-button").click(function() {
$("nav").slideToggle('slow');
});
//Campos para seleccionar paises y sus destinos--------------------------------------
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(6)
countryLists["empty"] = ["Select a Country"];
countryLists["Canada"] = ["Canada", "United States", "Mexico"];
countryLists["Colombia"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
countryLists["Estados Unidos"] = ["Russia", "China", "Japan"];
countryLists["China"] = ["Britain", "France", "Spain", "Germany"];
countryLists["Mexico"] = ["Argentina", "Peru", "Portugal", "Jamaica"];
/* CountryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function countryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the countryLists array
cList = countryLists[which];
// get the country select element via its known id
var cSelect = document.getElementById("innercountry");
// remove the current options from the country select
var len = cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i = 0; i < cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text = cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
} catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>Selecciona el país del cual quieres conocer las rutas marítimas y sus respectivos paises de destino</p>
<div class="fields-container">
<label for="country"><h4>País de origen</h4></label>
<select id="country" onchange="countryChange(this);">
<option value="empty">Selecciona el país de origen</option>
<option value="Canada">Canadá</option>
<option value="Colombia">Colombia</option>
<option value="Estados Unidos">Estados Unidos</option>
<option value="China">China</option>
<option value="Mexico">México</option>
</select>
<br/>
<label for="innercountry"><h4 class="titleincountry">País de destino</h4></label>
<select id="innercountry"><br/>
<option value="0">Paises de destino</option>
</select>
<br/>
<input type="submit" class="send" name="submit" value="Consulta las rutas">
</div>
</form>
<!-- (These are the divs that I want to show (prueba and pruebauno)) Mapa Principal y minimapas con animación -->
<section>
<div class="map">
<div id="open-button"><span></span><span></span></div>
<img src="image/map.png">
<div class="prueba"></div>
<div class="pruebauno"></div>
</div>
</section>