Display HTML Select box Based on Selecting Option From Other Select box 菜鸟问题

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/

Web 页面不执行任何操作。 出于某种原因，我必须添加额外的文本。

请帮助菜鸟。

谢谢

Answer 1

在第 20-27 行，你有一个带"引号的多行字符串。你不能在 JS 中使用"创建多行字符串，而不在每行的末尾添加\ 。 因此，只需在需要创建多行字符串的地方将"替换为`即可： x.innerHTML = `<label for="carsyo">Choose a yingyang</label>

更好的选择是将第二个 select 直接包含在您的 HTML 中并像这样显示/隐藏它。

Display HTML Select box Based on Selecting Option From Other Select box 菜鸟问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-04-22 22:27:58

Display HTML Select box Based on Selecting Option From Other Select box 菜鸟问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-04-22 22:27:58

解决方案1
1 已采纳 2022-04-22 22:27:58