如何通过单击 select 选项在 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

您必须在 select 元素上绑定更改事件，而不是在选项元素上绑定点击事件。

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

如何通过单击 select 选项在 html 元素中隐藏和显示

how hide and show in html element by click select option

javascript

jquery

select

html-select

jquery-selectors