Javascript 选择“选择”菜单上的特定值时显示HTML表格
在我的html页面上,我有一个带有一些选项的选择菜单。当我选择一个选项时,我希望html显示一个与该选项相关的表 例如,当我在“选择”菜单上选择“管理”时,如何显示准确的表格? 然后,当我选择Engineering时,它会隐藏Admin表并显示Engineering表Javascript 选择“选择”菜单上的特定值时显示HTML表格,javascript,html,Javascript,Html,在我的html页面上,我有一个带有一些选项的选择菜单。当我选择一个选项时,我希望html显示一个与该选项相关的表 例如,当我在“选择”菜单上选择“管理”时,如何显示准确的表格? 然后,当我选择Engineering时,它会隐藏Admin表并显示Engineering表 <div class="controls"> <select id="select01"> <option id="admi
<div class="controls">
<select id="select01">
<option id="admin">Admin</option>
<option id="eng">Engineering</option>
</select
</div>
<div style="display:none" id="admin">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ADMIN</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
</tbody>
</table>
</div>
<div style="display:none" id="eng">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Engineering</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
</tbody>
</table>
</div>
管理
工程类
已更新
根据您的代码:
$(function () {
$("#admin").show();
$("#select01").on("change", function () {
$(".myClass").hide();
$("div[id='" + $(this).val() + "']").show();
});
});
但首先,解决这个问题:
<select id="select01">
<option value="admin">Admin</option>
<option value="eng">Engineering</option>
</select>
测试:提示:ID在HTML中应该是唯一的。我会向div中添加一些类并缩短代码,但其工作方式相同。为什么要向div中添加类?这样做可以节省隐藏/显示每个ID的工作。你可以按班级选择全部,我已经更新了答案。它现在看起来不是很有用,但是如果您将来开始添加表(div),它将节省您的代码。
<div class="myClass" id="admin">
...
</div>
<div class="myClass" id="eng">
...
</div>
.myClass
{
display: none;
}