Javascript 根据下拉选择显示不同的表
我有10张不同的桌子。其中一个表格如下:Javascript 根据下拉选择显示不同的表,javascript,node.js,Javascript,Node.js,我有10张不同的桌子。其中一个表格如下: <table id="Vehicle-PS-Software"> <tr> <td width=10%> <input type="checkbox" name="option" value="TestID"> </td> <td width=20
<table id="Vehicle-PS-Software">
<tr>
<td width=10%>
<input type="checkbox" name="option" value="TestID">
</td>
<td width=20%>
Test ID
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="ServiceNow">
</td>
<td>
ServiceNow
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="GIT">
</td>
<td>
Git Hub
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="Jira">
</td>
<td>
Jira
</td>
</tr>
<tr>
<tr>
<td>
<input type="checkbox" name="option" value="Confluence">
</td>
<td>
Confluence
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="BO">
</td>
<td>
BO Access
</td>
<td>
<input type="file" name="sampleFile" />
</td>
</tr>
</table>
测试ID
ServiceNow
Git集线器
吉拉
汇流
BO访问
我的下拉列表如下:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Teams</button>
<p>please select your team</p>
<div id="myDropdown" class="dropdown-content">
<a href="#Vehicle PS">Vehicle PS</a>
<a href="#Vehicle RTB">Vehicle RTB</a>
<a href="#Property PS">Property PS</a>
<a href="#Property RTB">Property RTB</a>
<a href="#Commons PS">Commons PS</a>
<a href="#Commons RTB">Commons RTB</a>
<a href="#Mainframe Team">Mainframe Team</a>
<a href="#Testing">Testing</a>
</div>
</div>
团队
请选择您的团队
现在我想根据下拉选择显示不同的表。如果我选择vehicle PS,则vehicle PS table必须显示我是否从相应的下拉列表中选择了不同的选项
谁能帮我一下吗
尝试了以下代码,但不起作用
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
dropdowns[i].addEventListener("click", function(){
if(dropdowns[i]=="Vehicle PS")
{
document.getElementById("Vehicle-PS-Software").classList.toggle('show');
}
else{
document.getElementById("Vehicle-PS-Software").classList.remove('show');
}
});
}
var dropdowns=document.getElementsByClassName(“下拉内容”);
var i;
对于(i=0;i
下拉选项的正确选择器为
var dropdowns=document.querySelector('.dropdown content')。子项
您可以调试其余代码并检查onClick逻辑 您可以尝试代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
#Vehicle-PS-Software1 {display:none}
.show {display: block;}
.hide {display : none}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a onclick='dropDown(event)' href="#home">Vehicle PS</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<table id="Vehicle-PS-Software" class='hide'>
<tr>
<td width=10%>
<input type="checkbox" name="option" value="TestID">
</td>
<td width=20%>
Test ID
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="ServiceNow">
</td>
<td>
ServiceNow
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="GIT">
</td>
<td>
Git Hub
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="Jira">
</td>
<td>
Jira
</td>
</tr>
<tr>
<tr>
<td>
<input type="checkbox" name="option" value="Confluence">
</td>
<td>
Confluence
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="option" value="BO">
</td>
<td>
BO Access
</td>
<td>
<input type="file" name="sampleFile" />
</td>
</tr>
</table>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
dropdowns[i].addEventListener("click", function(event){
document.getElementById("Vehicle-PS-Software").classList.toggle('hide');
if(event.target.innerText=="Vehicle PS")
{
document.getElementById("Vehicle-PS-Software").classList.toggle('show');
document.getElementById("Vehicle-PS-Software").classList.toggle('hide')
}
else {
//document.getElementById("Vehicle-PS-Software").classList.remove('show');
//document.getElementById("Vehicle-PS-Software").classList.toggle('hide');
}
});
}
</script>
</body>
</html>
.dropbtn{
背景色:#3498DB;
颜色:白色;
填充:16px;
字体大小:16px;
边界:无;
光标:指针;
}
.dropbtn:悬停,.dropbtn:焦点{
背景色:#2980B9;
}
.下拉列表{
位置:相对位置;
显示:内联块;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:#f1f1;
最小宽度:160px;
溢出:自动;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
.下拉内容a{
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
}
.下拉列表a:悬停{背景色:#ddd;}
#Vehicle-PS-Software1{显示:无}
.show{display:block;}
.hide{显示:无}
可点击下拉列表
单击按钮打开下拉菜单
下拉列表
测试ID
ServiceNow
Git集线器
吉拉
汇流
BO访问
/*当用户单击按钮时,
在隐藏和显示下拉内容之间切换*/
函数myFunction(){
document.getElementById(“myDropdown”).classList.toggle(“show”);
}
var dropdowns=document.getElementsByClassName(“下拉内容”);
var i;
对于(i=0;i
尝试将此代码添加到JS。同时从html文件中删除myFunction()
const dropbtn = document.querySelector('.dropbtn');
dropbtn.addEventListener('click',()=>{
var myDropdown = document.querySelector('.dropdown-content');
if (myDropdown.style.display === "block") {
myDropdown.style.display = "none";
} else {
myDropdown.style.display = "block";
}});
函数myFunction(){
var drpoptions=document.getElementById(“mySelect”).options;
var e=document.getElementById(“mySelect”);
var strUser=e.options[e.selectedIndex].value;
如果(strUser==“车辆PS”){
document.getElementById(“车辆PS软件”).style.display=“块”;
}
否则{
document.getElementById(“车辆PS软件”).style.display=“无”;
}
如果(strUser==“大型机团队”){
document.getElementById(“大型机团队软件”).style.display=“block”;
}
否则{
document.getElementById(“大型机团队软件”).style.display=“无”;
}
它不是下拉菜单您没有按说明使用下拉元素。它不是下拉菜单。它是使用锚定标记的div。它是下拉菜单。我可以从预定义列表中选择值。请参阅,在执行您建议的更改后,它不起作用。您尝试过将内容作为和标记下拉吗?@Preethi我已经解决了您面临的问题。请参考我的简历
<script>
function myFunction() {
var drpoptions = document.getElementById("mySelect").options;
var e = document.getElementById("mySelect");
var strUser = e.options[e.selectedIndex].value;
if (strUser == "Vehicle PS") {
document.getElementById("Vehicle-PS-Software").style.display = "block";
}
else {
document.getElementById("Vehicle-PS-Software").style.display = "none";
}
if (strUser == "Mainframe Team") {
document.getElementById("Mainframe-Team-Software").style.display = "block";
}
else {
document.getElementById("Mainframe-Team-Software").style.display = "none";
}
function myFunction() {
var e = document.getElementById("filterTodate");
var strUser = e.options[e.selectedIndex].value;
if (strUser == "1") {
document.getElementById("range").style.display = "block";
document.getElementById("tillDate").style.display = "none";
}
if (strUser == "2") {
document.getElementById("tillDate").style.display = "block";
document.getElementById("range").style.display = "none";
}
}