非表示とクリック選択オプションにより、html要素でのショー

Question

非表示とhtml要素でのショー私が選択したオプション

link http://codepen.io/hesham-farag/pen/zNMXxJ

HTML

<label class="control-label" for=""> trans 'Free</label> 
    <select class="form-control free-or" name="isFree" > 
    <option></option> 
    <option value="Y">Yes</option> 
    <option value="N">No</option> 
    </select> 

<div class="fee-me"> 
    <label class="control-label" for="">Fees</label> 
    <input type="text" class="form-control "> 
</div> 

JSをクリックしたとき、どのようにどのように

$(document).ready(function(){ 
     $("select option").on("click",function(){ 
      if ($('select option').eq(1).val(n)){ 
       $(".fee-me")addClass("hide"); 
      }else{ 
       $(".fee-me")removeClass("hide"); 
      } 
     }); 
    }); 

Answer 1

chオプション要素のクリックイベントではなく、選択要素のイベントをアンジングします。

$("select").on("change",function(){ 
 
    if ($('select').val() == 'Y') { 
 
    $(".fee-me").addClass("hide"); 
 
    }else{ 
 
    $(".fee-me").removeClass("hide"); 
 
    } 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="control-label" for=""> trans 'Free</label> 
 
    <select class="form-control free-or" name="isFree" > 
 
    <option></option> 
 
    <option value="Y">Yes</option> 
 
    <option value="N">No</option> 
 
    </select> 
 

 
<div class="fee-me"> 
 
    <label class="control-label" for="">Fees</label> 
 
    <input type="text" class="form-control "> 
 
</div>