帮我写一个联动页面,是一个小画面,下面一个大框内展示事务所的所有内容选项,选择事务所内容后,会在最上面的一个显示输入框展示出选中的内容,要求画面美观,布局整齐,尺寸合适,
时间: 2024-04-17 16:27:24 浏览: 17
当然可以帮你写一个联动页面,满足画面美观、布局整齐和尺寸合适的要求。以下是一个简单的示例代码,你可以根据你的需求进行修改和扩展:
```html
<!DOCTYPE html>
<html>
<head>
<title>联动页面</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.select-container {
margin-bottom: 20px;
}
.select-container select {
width: 100%;
padding: 10px;
font-size: 16px;
}
.selected-item {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>联动页面</h1>
<div class="select-container">
<select id="firm-select">
<option value="">请选择事务所</option>
<option value="1">事务所1</option>
<option value="2">事务所2</option>
<option value="3">事务所3</option>
</select>
</div>
<div class="selected-item" id="selected-item"></div>
<script>
const firmSelect = document.getElementById('firm-select');
const selectedItem = document.getElementById('selected-item');
firmSelect.addEventListener('change', function() {
const selectedFirm = this.value;
if (selectedFirm) {
selectedItem.textContent = '已选中的事务所:' + this.options[this.selectedIndex].text;
} else {
selectedItem.textContent = '';
}
});
</script>
</div>
</body>
</html>
```
这段代码创建了一个联动页面,你可以选择一个事务所,然后选中的内容会显示在最上面的输入框中。
这个示例使用了简单的CSS样式,使页面布局整齐、尺寸合适。你可以根据需要自定义样式,添加更多的选项或者级联关系。希望这个示例对你有帮助!如果有任何问题,请随时提问。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)