J'ai 10 tables différentes. un de ces tableaux est ci-dessous:
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');
}
});
}
J'ai une liste déroulante comme ci-dessous:
<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>
Maintenant, je veux afficher différentes tables en fonction de la sélection déroulante. si je sélectionne le véhicule PS, le tableau du véhicule PS doit indiquer si je sélectionne une option différente dans le tableau déroulant correspondant.
Quelqu'un peut-il m'aider s'il vous plaît
J'ai essayé le code ci-dessous mais ne fonctionne pas.
<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>
5 Réponses :
Le sélecteur approprié pour les options de liste déroulante est
var dropdowns = document.querySelector('.dropdown-content').children
vous pouvez déboguer le reste du code et vérifier la logique onClick.
Vous pouvez essayer le code.
<!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>
la réponse que vous avez suggérée, j'avais déjà essayé. ça ne marche pas.
le rendu des tables est ce avec quoi je suis coincé. cela en fonction des valeurs de liste déroulante et en utilisant les paramètres de la table
Pouvez-vous s'il vous plaît donner le schéma d'écran de sortie attendu
essayez d'ajouter ce code à JS. supprimez également myFunction () du fichier html.
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";
}});
cela ne fonctionne pas après avoir effectué les modifications suggérées par vous.
avez-vous essayé le contenu déroulant sous forme de balises <select> et <option>?
@Preethi j'ai résolu le problème auquel vous êtes confronté. veuillez vous référer à ma solution . la raison pour laquelle vous n'obtenez pas la valeur de la balise d'ancrage cliquée est à cause de la propagation d'événements dans DOM
<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";
}
}
ce n'est pas une liste déroulante
Vous n'utilisez pas d'élément déroulant comme indiqué.
ce n'est pas une liste déroulante. c'est div en utilisant une balise d'ancrage.
c'est un menu déroulant. Je peux choisir la valeur dans la liste prédéfinie.
référez-vous à w3schools.com/howto/howto_js_dropdown.asp
Quelqu'un peut-il répondre à la question. j'ai besoin d'afficher le tableau entier en fonction de la sélection du menu déroulant