html选择队伍查看队员
时间: 2023-10-09 13:04:40 浏览: 117
如果您想在HTML中创建一个选择队伍并查看队员的页面,可以使用以下代码片段作为起点:
```html
<!DOCTYPE html>
<html>
<head>
<title>选择队伍查看队员</title>
</head>
<body>
<h1>选择队伍</h1>
<select id="teamSelect">
<option value="team1">队伍1</option>
<option value="team2">队伍2</option>
<option value="team3">队伍3</option>
</select>
<button onclick="showTeam()">查看队员</button>
<h2>队员列表</h2>
<ul id="playerList">
</ul>
<script>
function showTeam() {
var team = document.getElementById("teamSelect").value;
var playerList = document.getElementById("playerList");
playerList.innerHTML = "";
// 根据选中的队伍,添加队员列表
switch (team) {
case "team1":
playerList.innerHTML += "<li>队伍1 - 队员1</li>";
playerList.innerHTML += "<li>队伍1 - 队员2</li>";
playerList.innerHTML += "<li>队伍1 - 队员3</li>";
break;
case "team2":
playerList.innerHTML += "<li>队伍2 - 队员1</li>";
playerList.innerHTML += "<li>队伍2 - 队员2</li>";
playerList.innerHTML += "<li>队伍2 - 队员3</li>";
break;
case "team3":
playerList.innerHTML += "<li>队伍3 - 队员1</li>";
playerList.innerHTML += "<li>队伍3 - 队员2</li>";
playerList.innerHTML += "<li>队伍3 - 队员3</li>";
break;
default:
break;
}
}
</script>
</body>
</html>
```
这个页面有一个下拉菜单,让用户选择队伍,并且有一个“查看队员”按钮,当用户点击这个按钮时,会根据所选队伍在队员列表下方显示该队伍的队员列表。这个页面使用了 JavaScript 来处理用户的选择,并在页面上动态生成队员列表。您可以根据自己的需求进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)