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

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/[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>
<!--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

javascripthtmljqueryjquery-select2


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Benjamin Ashbaugh

Related Questions