编写代码,实现一个多级列表(做一个2级下拉列表即可)和对应的div显示框,用户在第1级列表中选择不同的项,第2级列表中的内容会随之改变,div框中的内容也会随之改变
时间: 2023-05-20 08:03:37 浏览: 59
好的,这是一个比较简单的前端编程问题,可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例代码:
HTML代码:
```
<select id="level1" onchange="updateLevel2()">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<select id="level2">
<option value="option1-1">选项1-1</option>
<option value="option1-2">选项1-2</option>
<option value="option1-3">选项1-3</option>
</select>
<div id="display"></div>
```
JavaScript代码:
```
function updateLevel2() {
var level1 = document.getElementById("level1");
var level2 = document.getElementById("level2");
var display = document.getElementById("display");
level2.innerHTML = "";
if (level1.value == "option1") {
var option1 = document.createElement("option");
option1.value = "option1-1";
option1.innerHTML = "选项1-1";
level2.appendChild(option1);
var option2 = document.createElement("option");
option2.value = "option1-2";
option2.innerHTML = "选项1-2";
level2.appendChild(option2);
var option3 = document.createElement("option");
option3.value = "option1-3";
option3.innerHTML = "选项1-3";
level2.appendChild(option3);
display.innerHTML = "你选择了选项1";
} else if (level1.value == "option2") {
var option1 = document.createElement("option");
option1.value = "option2-1";
option1.innerHTML = "选项2-1";
level2.appendChild(option1);
var option2 = document.createElement("option");
option2.value = "option2-2";
option2.innerHTML = "选项2-2";
level2.appendChild(option2);
display.innerHTML = "你选择了选项2";
} else if (level1.value == "option3") {
var option1 = document.createElement("option");
option1.value = "option3-1";
option1.innerHTML = "选项3-1";
level2.appendChild(option1);
var option2 = document.createElement("option");
option2.value = "option3-2";
option2.innerHTML = "选项3-2";
level2.appendChild(option2);
var option3 = document.createElement("option");
option3.value = "option3-3";
option3.innerHTML = "选项3-3";
level2.appendChild(option3);
display.innerHTML = "你选择了选项3";
}
}
```
CSS代码:
```
#display {
margin-top: 10px;
padding: 10px;
border: 1px solid black;
}
```
这段代码实现了一个2级下拉列表和对应的div显示框。用户在第1级列表中选择不同的项,第2级列表中的内容会随之改变,div框中的内容也会随之改变。