jQuery選擇選項 - 僅顯示特定選項的內容

Question

我想要做的就是，僅在所選選項「其他」（值= 18）時顯示「other_option_content」類，當選擇任何其他選項時顯示&例如：「臉譜「的類」other_option_content「不顯示（隱藏）。

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> 

Answer 1

在這裏你去：

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