CODEWITHSUNDEEP
jquery
ARTLoe
ARTLoe

Reputation: 1799

jQuery select option - display content only for a specific option

All i want to do is, display the class "other_option_content" only for the selected option "other" (value=18) & when any other option is selected e.g.: "facebook" the class "other_option_content" is not displayed (hidden).

HTML:

<Select id="userr_category_hear_id">
   <option value="">please choose</option>
   <option value="13">Google / Search Engine</option>
   <option value="14">Radio / TV</option>
   <option value="15">Facebook / LinkedIn</option>
   <option value="16">Someone from your company contacted me directly</option>
   <option value="17">A friend told me about it</option>
   <option value="18">Other</option>
</Select>

<div class="other_option_content">
 <div class="input text required user_hear">
  <textarea class="text required" id="userr_hear" name="userr[hear]"  placeholder="www.google.com">
  </textarea>
 </div>
</div>

Upvotes: 1

Views: 2510

Answers (1)

Tom B.
Tom B.

Reputation: 2962

Here you go:

// hide by default;
$('.other_option_content').hide();

$('#userr_category_hear_id').change(function() {
  if ($(this).val() == 18) {
    $('.other_option_content').show();
  } else {
    $('.other_option_content').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="userr_category_hear_id">
  <option value="">please choose</option>
  <option value="13">Google / Search Engine</option>
  <option value="14">Radio / TV</option>
  <option value="15">Facebook / LinkedIn</option>
  <option value="16">Someone from your company contacted me directly</option>
  <option value="17">A friend told me about it</option>
  <option value="18">Other</option>
</Select>

<div class="other_option_content">
  <div class="input text required user_hear">
    <textarea class="text required" id="userr_hear" name="userr[hear]" placeholder="www.google.com">
    </textarea>
  </div>
</div>

Upvotes: 5

Related Questions