我想根据下拉列表中的选择显示数据。 例如，如果我选择为空，则显示所有表数据。 如果我选择“a”，那么它将在行'a'中显示数据。 请建议如何达到这个要求。
<html>
<head>
<title>details</title>
<style>
table,
th,
td {
border: 0.5px solid black;
}
</style>
</head>
<div>
<body>
<h1>details</h1>
<select>
<option id=""></option>
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
<table>
<tr bgcolor="#C2D0C7">
<th>name</th>
<th>Description</th>
<th>URL</th>
</tr>
<tr>
<td rowspan="2">a</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td rowspan="2">d</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
</table>
</body>
</div>
</html>
答案 0 :(得分：3)
使用jquery脚本尝试使用它。匹配所选输入中的contains()字
更新了单HTML页的答案
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 0.5px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function change(that) { //in this get the value of changing input
var a = $(that).val() //its the value of selected data
if (a != "") { //it's check the not empty condition
$('tr').not('tr[bgcolor="#C2D0C7"]').hide() //its prevent the heading row `not()`
$('td[rowspan^="2"]:contains(' + a + ')').parent('tr').show() //match the seleted value to display
$('td[rowspan^="2"]:contains(' + a + ')').parent('tr').next().show()
//it matches the next row of other two columns it is the same in the first column
} else {
$('tr').show() //it selects empty data show all rows
}
}
</script>
</head>
<body>
<h1>details</h1>
<select onchange="change(this)">
<option id=""></option>
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
<table>
<tr bgcolor="#C2D0C7">
<th>name</th>
<th>Description</th>
<th>URL</th>
</tr>
<tr>
<td rowspan="2">a</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td rowspan="2">d</td>
<td>site URL</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
<tr>
<td>site1 url</td>
<td><a href=xyz.com target="_blank">xyz.com</a>
</td>
</tr>
</table>
</body>
</html>
答案 1 :(得分：1)
我不是给你完整的解决方案，但它会帮助你更多。
<select id="drop">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
$("#drop").change(function () {
var selectedvalue= this.value;
if(selectedvalue==0)
{
//clear the table
//get all results and show in table
}
else
{
//Clear the table
//get all records based on selectedvalue and display as you wish
}
});