CODEWITHSUNDEEP
javascriptjqueryhtml-select
Svitlana Saiod
Svitlana Saiod

Reputation: 1

Select option in jquery

Please help! I have options to select from. When I choose the option there is an additional input field. Please help to find the mistake. The input field is not coming.

<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
    }
 });            
});

Upvotes: 0

Views: 102

Answers (2)

PinkTurtle
PinkTurtle

Reputation: 7041

Your jQuery selector $('select[name=referral]:selected') is wrong and doesn't actually select anything - for 2 reasons.

  • Your select doesn't have a name attribute.
  • You use the :selected selector on a select HTML element instead of an option.

So you must add name="referral" to your HTML select and change your jQuery selector to $('select[name=referral] option:selected').

Another option if you don't want to change your HTML : $('#referral option:selected').val().

Example below.

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

Upvotes: 1

guradio
guradio

Reputation: 15565

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

Upvotes: 0

Related Questions