-1
votes

afficher différentes tables en fonction de la sélection déroulante

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>


6 commentaires

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


5 Réponses :


0
votes

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.


0 commentaires

1
votes

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>


3 commentaires

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



0
votes

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";
}});


3 commentaires

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



0
votes
 <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";
      }

0 commentaires

0
votes
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";
  }
}

0 commentaires