在jquery中選擇選項

Question

請幫忙！ 我有可供選擇的選項。當我選擇該選項時，還有一個額外的輸入字段。請幫助找到錯誤。輸入字段不會到來。

<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代碼：

$(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

你的jQuery選擇$('select[name=referral]:selected')是錯誤的，實際上沒有任何選擇 - 因爲兩個原因。

• 您的select沒有name屬性。
• 您使用selectHTML元素上的:selected選擇器代替option。

所以，你必須添加name="referral"到HTML select和你的jQuery選擇更改爲$('select[name=referral] option:selected')。

另一種選擇，如果你不想改變你的HTML：$('#referral option:selected').val()。

下面的示例。

$(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>