Wählen Sie die Option in jquery

Question

Bitte helfen Sie! Ich habe Optionen zur Auswahl. Wenn ich die Option wähle, gibt es ein zusätzliches Eingabefeld. Bitte helfen Sie den Fehler zu finden. Das Eingabefeld kommt nicht.

<div id="wrap"> 
<fieldset> 
     <ol class="formset"> 
      <li> 
       <label for="referral">Does the patient need referral?:</label>      
       <select type="select_option" id="referral" class="aboveage5"> 
        <option value="">Please Select ...</option> 
        <option value="zanempilo">Zanempilo follow up</option> 
        <option value="hospital">Clinic/Hospital referral</option>      
       </select> 
      </li> 
     </ol> 
<ol id="parent5" class="formset"> 
       <li> 
       <label for="iy_referred">Referred to: </label> 
        <input type="text" id="iy_referred" name="iy_referred"  class="iy_referred required"/> 
       </li> 
</ol> 
</fieldset>    
</div>    

JS-Code:

$(document).ready(function(){ 
$("#parent5").css("display","none"); 

$(".aboveage5").click(function(){ 
    if ($('select[name=referral]:selected').val() == "hospital") { 
     $("#parent5").slideDown("fast"); //Slide Down Effect 
    } else { 
     $("#parent5").slideUp("fast"); //Slide Up Effect 
    } 
});    
}); 

Answer 1

$(document).ready(function() { 
 
    $("#parent5").css("display", "none"); 
 

 
    $(".aboveage5").change(function() {//use change instead of click 
 
    console.log($('option:selected',this).val()) 
 
    if ($('option:selected',this).val() == "hospital") {//use $('option:selected',this).val() to get value of selected option 
 
     $("#parent5").slideDown("fast"); //Slide Down Effect 
 
    } else { 
 
     $("#parent5").slideUp("fast"); //Slide Up Effect 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <fieldset> 
 
    <ol class="formset"> 
 
     <li> 
 
     <label for="referral">Does the patient need referral?:</label> 
 
     <select type="select_option" id="referral" class="aboveage5"> 
 
      <option value="">Please Select ...</option> 
 
      <option value="zanempilo">Zanempilo follow up</option> 
 
      <option value="hospital">Clinic/Hospital referral</option> 
 
     </select> 
 
     </li> 
 
    </ol> 
 
    <ol id="parent5" class="formset"> 
 
     <li> 
 
     <label for="iy_referred">Referred to:</label> 
 
     <input type="text" id="iy_referred" name="iy_referred" class="iy_referred required" /> 
 
     </li> 
 
    </ol> 
 
    </fieldset> 
 
</div>

Answer 2

Ihre jQuery-Selektor $('select[name=referral]:selected') falsch ist und eigentlich nichts auswählen - aus 2 Gründen.

• Ihr select hat kein name Attribut.
• Verwenden Sie die :selected Selektor auf einem select HTML-Element anstelle von option.

So müssen Sie name="referral" zu Ihrem HTML select hinzufügen und Ihre jQuery $('select[name=referral] option:selected') Wähler ändern.

Eine weitere Option, wenn Sie Ihren HTML-Code nicht ändern möchten: $('#referral option:selected').val().

Beispiel unten.

$(document).ready(function() { 
 
    $("#parent5").css("display", "none"); 
 

 
    $(".aboveage5").click(function() { 
 
    if ($('#referral option:selected').val() == "hospital") { 
 
     $("#parent5").slideDown("fast"); //Slide Down Effect 
 
    } else { 
 
     $("#parent5").slideUp("fast"); //Slide Up Effect 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <fieldset> 
 
    <ol class="formset"> 
 
     <li> 
 
     <label for="referral">Does the patient need referral?:</label> 
 
     <select type="select_option" id="referral" class="aboveage5" name="referral"> 
 
      <option value="">Please Select ...</option> 
 
      <option value="zanempilo">Zanempilo follow up</option> 
 
      <option value="hospital">Clinic/Hospital referral</option> 
 
     </select> 
 
     </li> 
 
    </ol> 
 
    <ol id="parent5" class="formset"> 
 
     <li> 
 
     <label for="iy_referred">Referred to:</label> 
 
     <input type="text" id="iy_referred" name="iy_referred" class="iy_referred required" /> 
 
     </li> 
 
    </ol> 
 
    </fieldset> 
 
</div>