<select multiple multipleSelect th:with="type=${data}"></selset>动态获取data和设置data
时间: 2024-05-16 20:18:13 浏览: 9
首先,在HTML页面中创建一个多选下拉框:
```
<select multiple="multiple" th:field="*{selectedTypes}" id="selectedTypes">
<option th:each="type : ${types}" th:value="${type}" th:text="${type}"></option>
</select>
```
其中,`selectedTypes` 是一个后端提供的用于存储选中选项的字段,`types` 是一个后端提供的用于存储所有选项的集合。
接着,在JavaScript中获取 `data` 的值,可以通过Ajax请求后端获取,例如:
```
$.ajax({
url: "/getData",
type: "GET",
success: function(data) {
// 将data存储在变量中
var types = data.types;
// 设置选项
$("#selectedTypes").val(types);
}
});
```
在上述代码中,我们通过 `$.ajax` 方法向 `/getData` 发送GET请求,获取到后端返回的 `data` 数据。然后将 `data` 中的 `types` 字段存储在变量 `types` 中,并使用 `$("#selectedTypes").val(types)` 设置选项。
最后,需要注意的是 `th:field` 和 `id` 属性的值必须相同,这样才能正确地将选中的选项存储到后端的 `selectedTypes` 字段中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)
<?php // 连接数据库 $conn = new mysqli("localhost", "root", "123456", "wyya"); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 查询数据 $tables = array("one_list", "two_list", "three_list", "four_list", "five_list"); $data = array(); foreach ($tables as $table) { $sql = "SELECT * FROM " . $table; $result = mysqli_query($conn, $sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $row['语种'] = substr($table, 0, -5); // 获取语种名称 $data[] = $row; } } } // 渲染 HTML 模板 ?> <!DOCTYPE html> <html> <head> <title>网易云音乐歌单</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } th { background-color: #4CAF50; color: white; } .language-button { background-color: #f2f2f2; padding: 8px 16px; border: none; cursor: pointer; display: inline-block; margin-right: 10px; } .chinese { color: #e60000; } .english { color: #0066cc; } .japanese { color: #ff9900; } .korean { color: #3385ff; } .cantonese { color: #009933; } </style> </head> <body> 网易云音乐歌单 <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[0]; ?>"> <button type="submit" class="language-button chinese">华语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[1]; ?>"> <button type="submit" class="language-button english">英语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[2]; ?>"> <button type="submit" class="language-button japanese">日语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[3]; ?>"> <button type="submit" class="language-button korean">韩语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[4]; ?>"> <button type="submit" class="language-button cantonese">粤语</button> </form> <?php if (!empty($data)) { ?> 歌单名 歌单地址 歌曲量 播放量 收藏量 评论量 分享量 创建者 创建时间 <?php foreach ($data as $row) { ?> <?php echo $row['歌单名']; ?> <?php echo $row['歌单地址']; ?> <?php echo $row['歌曲量']; ?> <?php echo $row['播放量']; ?> <?php echo $row['收藏量']; ?> <?php echo $row['评论量']; ?> <?php echo $row['分享量']; ?> <?php echo $row['创建者']; ?> <?php echo $row['创建时间']; ?> <?php } ?> <?php } else { ?> 暂无数据 <?php } ?> </body> </html> <?php // 关闭连接 $conn->close()0>修改代码,通过点击按钮展示出对应的单个歌单
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)