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

Posted 2023-05-09

【中文标题】如何通过单击选择选项在 html 元素中隐藏和显示

【英文标题】：how hide and show in html element by click select option

【发布时间】：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>

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");
          
        );
    );

【参考方案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>