Div Update From Selecting HTML Option-CodePudding

Getting console error:

SyntaxError: Unexpected end of script.

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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

CodePudding user response：

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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>