根据来自其他 Select 框的 Selecting 选项显示 HTML Select 框菜鸟问题

Question

尝试让 innerHTML 在选择另一个 select 框的选项时显示 select 框。

这是我的代码：

<!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 在这里：https://jsfiddle.net/CoolBuys1290/59qmbt0f/28/

网页没有做任何事情。由于某些原因，我必须添加额外的文字。

请帮助菜鸟。

谢谢

Answer 1

在第 20-27 行，您有一个带有 " 个引号的多行字符串。如果不在每行末尾添加 \ ，则无法在 JS 中使用 " 创建多行字符串。因此，只需将 " 替换为 `，您需要创建一个 multi-line 字符串，如下所示：x.innerHTML = `<label for="carsyo">Choose a yingyang</label>

更好的选择是将第二个 select 直接包含在 HTML 和 show/hide it like this 中。

根据来自其他 Select 框的 Selecting 选项显示 HTML Select 框菜鸟问题

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

javascript

html

jquery

jquery-select2

根据来自其他 Select 框的 Selecting 选项显示 HTML Select 框 菜鸟问题

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

javascript

html

jquery

jquery-select2

根据来自其他 Select 框的 Selecting 选项显示 HTML Select 框菜鸟问题