Obteniendo el error de la consola:
Código aquí:
<!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> <script> <!--Need help here I think.--> function myFunction(){ var x = document.getElementById("myDIV"); var y = this.value; switch (y) { case '1': x.innerHTML = "<p>Volvo dude</p>"; break; case '2': x.innerHTML = "<p>Roy!</p>"; } } </script> <style> select { width: 150px; } </style> </head> <body> <div id="myDIV">Hello</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>No puedo usar el editor de fragmentos porque todo lo que tengo es un iPad.
JSFiddle aquí: https://jsfiddle.net/CoolBuys1290/59qmbt0f/19/
Ayúdenme a actualizar el texto div según la selección de una opción.
Tirantes actualizados.
Gracias.
El eslogan de jQuery es "¡escribe menos, haz más!" - y lo siguiente lo retoma en cierto modo. Creé una matriz de captions que proporciona los subtítulos para el div y, si no se proporcionó nada, lo vuelve a cambiar a "Hola".
const x=document.getElementById("myDIV"), captions=[null,'Volvo dude!','Roy!']; $(document).ready(function() { $("#cars2").select2().change(ev=>x.textContent=captions[ev.target.value]||"Hello"); }); select { width: 150px; } <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> <div id="myDIV">Hello</div> <label for="cars">Choose a car:</label> <select id="cars2"> <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>Te faltaba la forma correcta de elegir la opción seleccionada actual que, por ejemplo, en el fragmento que incluí aquí, tengo usando la select#cars2 option:selected y a través del objeto jQuery, porque tu código se basó en él , en lugar de vainilla document.querySelector
$(document).ready(function() { $("#cars2").select2(); }); 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 = "<p>Volvo dude</p>"; break; case '2': x.innerHTML = "<p>Roy!</p>"; } } select { width: 150px; } <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> <div id="myDIV">Hello</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>