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

【问题标题】：how hide and show in html element by click select option如何通过单击选择选项在 html 元素中隐藏和显示
【发布时间】：2017-06-30 07:12:15
【问题描述】：

当我点击所选选项时如何在 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>

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

【问题讨论】：

标签： javascript jquery select jquery-selectors html-select

【解决方案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>

【讨论】：