Getting console error:
Code here:
<!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>
I can't use the snippet editor 'cause all I have is an iPad.
JSFiddle here: https://jsfiddle.net/CoolBuys1290/59qmbt0f/19/
Please help me update the div text based on selecting an option.
Updated braces.
Thanks.
The jQuery slogan is "write less, do more!" - and the following takes it up in a way. I have created an array captions that supplies the captions for the div and - if nothing was provided - switches it back to "Hello".
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>You were missing the correct way to pick the current selected option that, for example in the snippet I included here, I've got using the css selector select#cars2 option:selected and through the jQuery object, because your code was based on it, instead of the vanilla 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>