Desired result: https://jsfiddle.net/nstruth/t0dopzav/1/
The HTML is displaying when I select Volvo, but the JavaScript isn't running. I looked at other innerHTML JavaScript questions, but I'm confused. As you can see in this JSFiddle the units aren't populating but I can enter numbers in the input field. https://jsfiddle.net/nstruth/ksgwaqc8/8/
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$("#cars2").select2();
});
//Distance Math
var units = [
['Inches', 0.025400000000000],
['Feet', 0.30480000000000000],
['Furlongs', 201.168]
];
var selectors = document.querySelectorAll('.newClass1');
for (var i = 0; i < units.length; i ) {
for (var j = 0; j < selectors.length; j ) {
var option = document.createElement('option');
option.value = units[i][1];
option.textContent = units[i][0];
selectors[j].add(option);
}
}
function calcLength1() {
var SpecialValue = document.getElementById("lengthInput1").value * document.getElementById("lengthCalc1").value / document.getElementById("lengthCalc2").value;
document.getElementById("lengthInput2").value = SpecialValue.toFixed(12);
}
function calcLength2() {
var SpecialValue = document.getElementById("lengthInput2").value * document.getElementById("lengthCalc2").value / document.getElementById("lengthCalc1").value;
document.getElementById("lengthInput1").value = SpecialValue.toFixed(12);
}
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>From:</p>
<select style="float:left" id="lengthCalc1" oninput="calcLength1()" onchange="calcLength1()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput1" type="number" oninput="calcLength1()" onchange="calcLength1()" />
<p>To:</p>
<select style="float:left" id="lengthCalc2" oninput="calcLength2()" onchange="calcLength2()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput2" type="number" oninput="calcLength2()" onchange="calcLength2()" />`;
$(".js-example-basic-single").select2();
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}select {
width: 150px;
}
.select2-selection--single {
height: 100px !important
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: 2px solid red;
border-radius: 5px;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<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>
<script>
</script>CodePudding user response：
I solved my problem with display:none and jQuery. This fiddle shows what I did. https://jsfiddle.net/nstruth/482sgxcu/9/
HTML:
<!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" />
<link rel="stylesheet" href="STYLE.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script> // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('#cars2').select2();
$('#cars2').select2('open');
});
</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">
<option value="red">Pick something</option>
<option value="yellow">Volvo</option>
<option value="blue">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<script>
$(function() {
$('#cars2').change(function(){
$('.colors').hide();
$('#' $(this).val()).show();
});
});
</script>
<div id="yellow" style="display:none">
<p>From:</p>
  <select style="float:left;" id="MetricAndImperialLength1" oninput="Run1()" onchange="Run1()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000" id="Input1" type="number" oninput="Run1()" onchange="Run1()">
<p>To:</p>
<select style="float:left" id="MetricAndImperialLength2" oninput="Run2()" onchange="Run2()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000" id="Input2" type="number" oninput="Run2()" onchange="Run2()" /></div>
<script src="mathandstuff.js"></script>
<script>
$(".js-example-basic-single").select2();
</script>
</body>
</html>