Intentando que innerHTML muestre el cuadro de selección cuando se elige una opción de otro cuadro de selección.
Aquí está mi código:
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script> // In your Javascript (external .js resource or <script> tag) $(document).ready(function() { $("#cars2").select2(); }); </script> <!--Need help here--> <script> function myFunction(event){ var x = document.getElementById("myDIV"); //here you are picking the selected option item var y = $('select#cars2 option:selected').val(); switch (y) { case '1': x.innerHTML = "<label for="carsyo">Choose a yingyang</label> <select name="cars3" id="cars4"> <option value="volvo">Voldo</option> <option value="saab">Roy drives</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>"; break; case '2': x.innerHTML = "<p>Roy!</p>"; } } </script> <style> select { width: 150px; } </style> </head> <body> <div id="myDIV"><p> Hello </p></div> <label for="cars">Choose a car:</label> <select id="cars2" onchange="myFunction()"> <option value="0">Pick something</option> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3">Opel</option> <option value="4">Audi</option> </select> </body> </html>JSFiddle aquí: https://jsfiddle.net/CoolBuys1290/59qmbt0f/28/
La página web no hace nada. Tengo que agregar texto adicional por alguna razón.
Por favor, ayuda a un novato.
Gracias
En la línea 20-27, tiene una cadena multilínea con comillas " . No puede crear cadenas multilínea usando " en JS sin agregar \ al final de cada línea. Así que simplemente reemplace " con ` donde necesita crear una cadena de varias líneas como esta: x.innerHTML = `<label for="carsyo">Choose a yingyang</label>
La mejor opción sería incluir la segunda selección directamente en su HTML y mostrarla/ocultarla así .