html - Dropdown Menu conditionals for two options in jQuery? -

i'm creating form in html 2 options: phone , email.

please see complete example: https://jsfiddle.net/f6xhbcys/

so when user clicks on phone, presented divs in .contact-phone-option div, , if user clicks on email, presented div in .contact-email-option

the code wrote isn't working, though i've checked on , on again matching ids i've used, , can't seem figure out why nothing happening when option selected.

html: preferred method of contact select phone email

    <div class="contact-phone-option">         <div class="col-lg-6">           <label>phone</label>           <input id="contact-phone" name="contact-phone" value="" pattern="^\(?\d{3}\)?[- .]?\d{3}[- .]?\d{4}$" type="tel" required/>         </div>         <div class="col-lg-6">           <label>best time call</label>           <input id="contact-time" name="contact-time" value="">         </div>     </div>        <div class="col-lg-12 contact-email-option">         <label>email</label>         <input id="contact-email" name="contact-email" value="" required type="email">       </div> 

jquery:

// contact form dropdown menu                                                                                     $('.contact-phone-option, .contact-email-option').hide(); $('#contact-method-menu').change(function () {     if ($('#contact-phone').is(':selected')) {         $('.contact-phone-option').show();         $('.contact-email-option').hide();     }     if ($('#contact-email').is(':selected')) {         $('.contact-email-option').show();         $('.contact-phone-option').hide();     } }); 

you're checking $('#contact-phone') , $('#contact-email') :selected. since they're inputs, never happen. check option :selected. however, step isn't needed, since need .val() of select. can check value , match "phone" , "email".

side note, fiddle missing jquery!

     // contact form dropdown menu             $('.contact-phone-option, .contact-email-option').hide();      $('#contact-method-menu').on('change', function() {        if ($('#contact-method-menu').val() == 'phone') {          $('.contact-phone-option').show();          $('.contact-email-option').hide();        } else if ($('#contact-method-menu').val() == 'email') {          $('.contact-email-option').show();          $('.contact-phone-option').hide();        }      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="col-lg-12">    <label>preferred method of contact</label>    <select id="contact-method-menu" name="contact-method-menu" required>      <option value="">select</option>      <option value="phone">phone</option>      <option value="email">email</option>    </select>  </div>    <div class="contact-phone-option">    <div class="col-lg-6">      <label>phone</label>      <input id="contact-phone" name="contact-phone" value="" pattern="^\(?\d{3}\)?[- .]?\d{3}[- .]?\\  d{4}$" type="tel" required/>    </div>    <div class="col-lg-6">      <label>best time call</label>      <input id="contact-time" name="contact-time" value="">    </div>  </div>    <div class="col-lg-12 contact-email-option">    <label>email</label>    <input id="contact-email" name="contact-email" value="" required type="email">  </div>

another side note line:

$('.contact-phone-option, .contact-email-option').hide(); 

you'll end seeing flash of content going route, since won't hide() until jquery loaded. should consider hiding in css, , showing there. shorten show() , hide() calls to:

$('.contact-phone-option, .contact-email-option').toggle();