如何通過單擊選擇選項在html元素中隱藏和顯示

Question

當我單擊選定的選項時，如何在html元素中隱藏和顯示

鏈接 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

您必須在選擇元素上綁定更改事件，而不是在選項元素上綁定單擊事件。

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