Zweite DropDown basierend auf der ersten Dropdown-Auswahl anzeigen/verbergen

Ich versuche, bestimmte Auswahlmöglichkeiten in der zweiten Dropdown-Liste anzuzeigen oder auszublenden, je nachdem, was in der ersten Dropdown-Liste ausgewählt wurde. Das habe ich in meiner Funktion. Insgesamt habe ich eine HTML-Tabelle, die mit meinen JSON-Daten auf der Grundlage der ausgewählten Auswahl gefüllt werden soll. Im Moment wird es mit nur einem Drop-Down-Bereich gefüllt. Ich möchte ein Dropdown hinzufügen, um sie besser zu kategorisieren.Zweite DropDown basierend auf der ersten Dropdown-Auswahl anzeigen/verbergen

<script> 
    function myFunction() { 

     var selection = document.getElementById("data_options").value; 

      document.getElementById("test_drop").value; 

     var table = document.getElementById("data_values"); 

     $("#data_values tr").each(function() { 
      var $selection = $('#data_options').val(); 

      $(this).find('td:not(:first-child)').each(function() { 

      var $col = $(this).closest('table').find('th').eq($(this).index()).attr('id'); 
      var $row = $(this).closest('tr').attr('id'); 

      $(this).text(orgs[$col][$row][$selection]); 
     }) 
}) 
}

Und dann sind hier meine zwei Dropdowns.

<body> 
    <!-----first drop down----> 
    <select id="test_drop"> 
     <option value="selection1">selection1</option> 
     <option value="selection2">selection2</option> 
     <option value="selection3">selection3</option> 
    </select> 

    <!-----second drop down----> 
    <select id="data_options" onchange="myFunction()"> 
     <option value="authority">Authority</option> 
     <option value="governance">Governance</option> 
     <option value="Management">Management</option> 
     <option value="use_cases">Use Cases</option> 
     <option value="community">User Community</option> 
     <option value="Definitions">Definitions</option> 
     <option value="Periodicity">Periodicity</option> 
     <option value="Start/End Criteria">Start/End Criteria</option> 
     <option value="it_system">IT System/Database</option> 
     <option value="Data Quality">Data Quality</option> 
     <option value="Tailoring">Tailoring</option> 
     <option value="Data Access">Data Access</option> 
     <option value="Handling and Security">Handling and Security</option> 
     <option value="Data Lifecycle">Data Lifecycle</option> 
     <option value="Historical Archives">Historical Archives</option> 
     <option value="Integration">Integration</option> 
     <option value="Review/Approval">Review/Approval</option> 
    </select>

So zum Beispiel, wenn die Auswahl 1 nach unten in dem ersten Tropfen gewählt wird, möchte ich die ersten sechs Auswahlmöglichkeiten für die zweite Dropdown. Wenn Auswahl 2 ausgewählt ist, möchte ich die nächsten 6 Auswahlen. Und wenn Auswahl 3 ausgewählt ist, möchte ich die letzten 5 Auswahlmöglichkeiten sehen. Und sobald die zweite Auswahl angezeigt wird, sollte meine HTML-Tabelle mit den JSON-Daten gefüllt werden. Hier ist ein Ausschnitt meiner JSON-Daten.

Wenn Sie helfen könnten, wie ich bestimmte Auswahlen zeigen oder verbergen kann, wäre das großartig. Vielen Dank!

Quelle

2017-12-18 Jimmy Lange

können Sie eine js Geige tun? –

Ich rate Ihnen, vue zu verwenden und fügen Sie einfach ein V-Modell zu Ihrer Auswahl, und von dort können Sie leicht Dinge mit einem v-if zeigen.

(Wenn Sie wissen, wie Vue funktioniert, ist das)

Quelle

2017-12-18 19:51:52 olvenmage

Ich bin mir nicht sicher, wie Vue funktioniert. Könnten Sie ein Beispiel geben? –

jsfiddle: https://jsfiddle.net/Lmg1rkq1/ – olvenmage

Zweite DropDown basierend auf der ersten Dropdown-Auswahl anzeigen/verbergen

Antwort

Verwandte Themen