So machen Sie eine zweite Dropdown-Auswahl aus der Auswahl der ersten Drop-Down in der Schleife

Question

for ($i = 0; $i <= $member_count - 1; $i++) { 
     ?> 
     <select id='purpose' name="member[<?= $i ?>][health_status]"> 
     <option value=""></option> 
     <option value="0">Perfect</option> 
     <option value="1">Not well</option> 
     </select> 
    <div id='health'> 
     <label>Illness If Any:</label> 
     <select name="member[<?= $i ?>][illness_type]"> 
     <option value=""></option> 
     <option value="0">Diabetes</option> 
     <option value="1">BP</option> 
     <option value="2">Head</option> 
     </select> 
</div> 

Wie man zweite Drop-Down-ausblenden von den Möglichkeiten der ersten Drop-Down. .Dropdown nicht richtig für Schleife

Script-Code arbeiten:

<script> 
       $(document).ready(function() { 
        $('#purpose').on('change', function() { 
         if (this.value == 'Perfect') 
         { 
          $("#health").hide(); 

         } else 
         { 
          $("#health").show(); 
         } 
        }); 
       }); 
      </script> 

Answer 1

würden Sie haben für diese Javascript verwenden. Mit jQuery sollte dies der Fall sein; ersetzen Sie einfach den secondDropdownMenuSelector Wert mit einem Selektor für Ihr zweites Drop-Down-Menü (man könnte ihm zum Beispiel eine ID geben):

<script type="text/javascript"> 

    $document).ready(function(){ 

     secondDropdownMenuSelector = "yourSelectorHere"; 

     $("#purpose").on("change", function(){ 
      if($(this).val()=='1' && $(secondDropdownMenuSelector).is(":hidden")){ 
       $(secondDropdownMenuSelector).show(); 
      } 
      else if ($(this).val()=='0' && $(secondDropdownMenuSelector).is(":visible")) { 
       $(secondDropdownMenuSelector).hide(); 
      }//end if 
     }); 
    }); 

</script> 

Obwohl ich sehe jetzt, dass Sie die Dropdown-Menüs mehrmals eine Schleife zur Ausgabe verwenden. Dies führt dazu, dass mehrere Elemente die gleiche ID haben. Dies kann niemals der Fall sein; IDs sollen eindeutig sein. Sie müssen entweder jedem Element eine eindeutige ID geben (Sie könnten das tun, indem Sie "Zweck" mit $ i verketten), oder besser noch, Sie sollten keine ID verwenden, sondern eine Klasse.

Auch, wenn Sie eine Klasse verwenden, laden dann statt

$(secondDropdownMenuSelector) 

würden Sie dann

$(this).siblings(secondDropdownMenuSelector) 

verwenden, um die korrekte Dropdown-Menü jedes Mal zu verweisen.

Answer 2

Geben Sie das eine Chance !!

$(document).ready(function() { 
 
        $('.purpose').on('change', function() { 
 
         if (this.value == 'Perfect') 
 
         { 
 
          $(this).parents(".select_container").find("#health").hide(); 
 

 
         } else 
 
         { 
 
          $(this).parents(".select_container").find("#health").show(); 
 
         } 
 
        }); 
 
});

for ($i = 0; $i <= $member_count - 1; $i++) { 
 
     ?> 
 
<div class="select_container"> 
 
     <select class='purpose' name="member[<?= $i ?>][health_status]"> 
 
     <option value=""></option> 
 
     <option value="0">Perfect</option> 
 
     <option value="1">Not well</option> 
 
     </select> 
 
    <div class='health'> 
 
     <label>Illness If Any:</label> 
 
     <select name="member[<?= $i ?>][illness_type]"> 
 
     <option value=""></option> 
 
     <option value="0">Diabetes</option> 
 
     <option value="1">BP</option> 
 
     <option value="2">Head</option> 
 
     </select> 
 
    </div> 
 
</div>

Zunächst einmal habe ich id-Attribut von ausgewählten Klasse geändert, da es nicht richtig gleiche ID für mehrere Auswahlboxen zu verwenden. Das nächste, was ich getan habe, ist, dass ich die Auswahlfelder in einem Div eingeschlossen habe, und dadurch kann ich das div mit dem Elternselektor von jquery verstecken und anzeigen. Guck mal!!