在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>