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>

选择特定下拉菜单时添加课程？

1 个答案: