SCR19Usar un evento onchange en un elemento select sin provocar un cambio de contexto

Este ejemplo contiene dos elementos select. Cuando se selecciona un elemento en el primer select, las opciones del otro select se actualizan en consecuencia. El primer elemento select contiene una lista de continentes. El segundo elemento select contendrá una lista parcial de países situados en el continente seleccionado. Hay un evento onchange asociado al select de continentes. Cuando cambia la selección de continente, los elementos del select de países se modifican mediante JavaScript a través del Document Object Model (DOM). Todos los datos necesarios, la lista de países y de continentes, están incluidos dentro de la página web.

Resumen del código que figura a continuación

• Variable de tipo array countryLists, que contiene la lista de países de cada continente del elemento select desencadenante.
• Función countryChange(), a la que llama el evento onchange del elemento select de continentes.
• El código HTML para crear los elementos select en el cuerpo de la página web.

<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset=utf-8"> 
    <title>Dynamic Select Statements</title> 
    <script>
    // array of possible countries in the same order as they appear
    // in the country selection list 
    var countryLists = new Array(4) 
    countryLists["empty"] = ["Select a Country"]; 
    countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
    countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
    countryLists["Asia"] = ["Russia", "China", "Japan"]; 
    countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
    /* 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("country"); 
    // 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>
</head>
<body>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <div>
    <label for="country">Select a country</label>
    <select id="country">
      <option value="0">Select a country</option>
    </select>
  </div>
</body>
</html>

Aquí hay un ejemplo práctico: Dynamic Select (select dinámico)