Home Display HTML Select box Based on Selecting Option From Other Select box Noob Question

Questions

Display HTML Select box Based on Selecting Option From Other Select box Noob Question

April 23, 2022

Trying to get innerHTML to display select box when an option of another select box is chosen.

Here’s my code:

<!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 here: https://jsfiddle.net/CoolBuys1290/59qmbt0f/28/

Web page doesn’t do anything. I have to add extra text for some reason.

Please help a noob out.

Thanks

>Solution :

On line 20-27, you have a multiline string with " quotes. You can’t create multine strings using " in JS without adding \ to the end of each line. So simply replace the " with ` where you need to create a multi-line string like this: x.innerHTML = `<label for="carsyo">Choose a yingyang</label>

The better option would be to include the second select directly in your HTML and show/hide it like this.