选择特定下拉列表时添加一个类？

Question

我想在 html5 表单中选择某个下拉选项时显示一个链接。

在页面加载时，我想删除 ID 为“pension-faq-icon”的链接，并且仅在用户选择 <option value="<%= User::LENDER_TYPE_PENSION_INDIVIDUAL %>" id="select-ind-pension">Individual Pension Account</option> 时才显示它

HTML：

<div class="seven columns">
                  <div class="select-holder icon icon_select">
                    <select name="user[user_subtype]" id="user_lender_type">
                      <option value="">Select type</option>
                      <option value="<%= User::LENDER_TYPE_INDIVIDUAL %>" id="select-ind">Individual Lender</option>
                      <option value="<%= User::LENDER_TYPE_PENSION_INDIVIDUAL %>" id="select-ind-pension">Individual Pension Account</option>
                      <!--<option value="sme" id="select-sme">Investment Business</option>-->
                    </select>
                  </div>
                  <p class="icon icon_info form-help-pension-faq show" id="pension-faq-icon">Need help? <a href="<%= faq_pension_path %>" target="_blank">Read Our Pensions FAQ</a></p>
                </div>

js 文件：

var user_type = $("#user_user_type").val();
  var option_type  = $("#select").val();

if(user_type == 'lender') {
    $('#pension-faq-icon').addClass('display-none');
  }
  if (option_type == 'individual_pension_lender'){
    //$('#pension-faq-icon').removeClass('display-none');
    console.log(option_type);
  }

目前，上面的代码成功地没有显示 ID 为“pension-faq-icon”的行。如果用户选择了上面提到的特定下拉选项，我该如何再次添加它？

Answer 1

要完成这项工作，您需要将change 事件处理程序附加到select，只要用户选择一个选项就会运行。目前，您的逻辑仅在页面加载时执行。

还请注意，您可以通过向toggle() 提供一个布尔值来简化该过程，该布尔值指定是隐藏还是显示相关元素。试试这个：

$('#user_lender_type').change(function() {
  $('#pension-faq-icon').toggle($(this).val() == 'individual_pension_lender');
});

#pension-faq-icon {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="seven columns">
  <div class="select-holder icon icon_select">
    <select name="user[user_subtype]" id="user_lender_type">
      <option value="">Select type</option>
      <option value="lender" id="select-ind">Individual Lender</option>
      <option value="individual_pension_lender" id="select-ind-pension">Individual Pension Account</option>
    </select>
  </div>
  <p class="icon icon_info form-help-pension-faq show" id="pension-faq-icon">
    Need help? 
    <a href="<%= faq_pension_path %>" target="_blank">Read Our Pensions FAQ</a>
  </p>
</div>