select5.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Select 5</title>
  5. const satelites = {
  6. 'La Tierra': [ 'La Luna' ],
  7. Marte: [ 'Fobos', 'Deimos' ],
  8. Júpiter: [ 'Io', 'Europa', 'Ganímedes' ],
  9. Saturno: [ 'Titán', 'Tetis', 'Mimas' ],
  10. Plutón: [ 'Caronte' ],
  11. };
  12. function cambiarPlaneta(select) {
  13. const planeta = select.value;
  14. const subselect = document.querySelector('#satelite');
  15. subselect.textContent = ''; // Borra los <option> que tuviese
  16. if (planeta == '') {
  17. subselect.setAttribute('disabled', true);
  18. } else {
  19. subselect.removeAttribute('disabled');
  20. subselect.appendChild(document.createElement('option'));
  21. for (const satelite of satelites[planeta]) {
  22. const option = document.createElement('option');
  23. option.textContent = satelite;
  24. subselect.appendChild(option);
  25. }
  26. }
  27. }
  28.  
  29. </script>
  30. </head>
  31. <h1>Select 5</h1>
  32. <p>
  33. <label>Planeta</label>
  34. <select id="planeta"
  35. autocomplete="off"
  36. onchange="cambiarPlaneta(this)">
  37. <option>La Tierra</option>
  38. <option>Marte</option>
  39. <option>Júpiter</option>
  40. <option>Saturno</option>
  41. <option>Plutón</option>
  42. </select>
  43. <br>
  44. <label>Satélite</label>
  45. <select id="satelite"
  46. autocomplete="off" disabled></select>
  47. </p>
  48. </body>
  49. </html>

Proinf.net