как скрыть и показать в 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 ange на элементе select вместо события click на элементе option.

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