为什么不在 Select 框中填充字段？

Question

想要的结果：https://jsfiddle.net/nstruth/t0dopzav/1/

我select沃尔沃时显示HTML，但JavaScript不是运行。我看了其他innerHTML JavaScript 的问题，但我很困惑。正如您在此 JSFiddle 中看到的那样，单位没有填充，但我可以在输入字段中输入数字。 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" class="js-example-basic-single select2-container newClass1" 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" class="js-example-basic-single select2-container newClass1" 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/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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>

Answer 1

我用 display:none 和 jQuery 解决了我的问题。这个 fiddle 展示了我所做的。 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/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="STYLE.css">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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>
  &nbsp&nbsp<select style="float:left;" id="MetricAndImperialLength1" class="js-example-basic-single select2-container newClass1 colors" 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>

&nbsp;&nbsp;  <select style="float:left" id="MetricAndImperialLength2" class="js-example-basic-single select2-container newClass1" 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>

为什么不在 Select 框中填充字段？

Why Won't Fields be Populated in Select Box?

javascript

html

jquery

css

jquery-select2