Wie wird eine Auswahl nur angezeigt, wenn die Option anderer Auswahl ausgewählt wurde?

Question

Ich habe 4 Auswahlen auf einer Seite und nur die erste ist sichtbar. Auch hat die erste Auswahlgrund prompt string: Person wählen wie folgt aus:

<select name="post[person_id]"> 
    <option value="">Choose person</option> 
    <option value="1">David</option> 
    <option value="2">Sam</option> 
    <option value="3">Tobias</option> 
</select> 

Sobald Benutzer wählt eine Option aus der ersten Dropdown-Liste die anderen 3 wählt angezeigt werden müssen.

Wie wird es implementiert?

Answer 1

Sie müssen onchange Methoden verwenden.

<select onchange="myFunction()"> 

<script> 
function myFunction(){ 

// fetch new data for the next select. 

//append the new options on next select. 

// make select available or enabled 

} 

</script> 

Für die erste Auswahl Verwendung der onchange zu holen (Auffüllen) die möglichen Optionen der nächsten wählt. Und machen Sie dasselbe für die folgenden Auswahlen.

Sie können sie auch abholen und in der abgeschlossenen Instanz verfügbar machen, um die Auswahl zu füllen.

Wenn Sie nicht verwenden jQuery. Sie können die Option anhängen

Answer 2

Hier ist eine einfache jquery Lösung. Der Schlüssel ist, das Ereignis .change zu verwenden und es zu deinen Dropdowns anzuschließen.

HTML

<select id="controllerDD"> 
     <option value="">Select...</option> 
     <option value="Show 1">Show 1</option> 
     <option value="Show 2">Show 2</option> 
     <option value="Show All">Show All</option> 
    </select> 
    <p>DD 1</p> 
    <select id="DD1" style="display:none"> 
     <option value="blah">Select...</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
    </select> 
    <p>DD 2</p> 
    <select id="DD2" style="display:none"> 
     <option value="blah">Select...</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
    </select> 

JavaScript

$('#controllerDD').change(function (e) { 
    var selected = $(e.currentTarget).val(); 
    $('#DD1').hide(); 
    $('#DD2').hide(); 
    switch (selected) { 
     case "Show 1": 
      $('#DD1').show(); 
      break; 
     case "Show 2": 
      $('#DD2').show(); 
      break; 
     case "Show All": 
      $('#DD1').show(); 
      $('#DD2').show(); 
      break; 
     default: 
      break; 
    } 
})