Question

我正在用HTML创建一个表单，有两个选项：电话和电子邮件。

请参阅此示例以获取完整示例：https://jsfiddle.net/f6xhbcys/

因此，当用户点击手机时，会在.contact-phone-option div中显示div，如果用户点击了电子邮件，则会在.contact-email-option中显示div。 p>

我编写的代码无效，即使我已经反复检查了我使用过的匹配ID，但似乎无法弄清楚为什么在选择选项时没有发生任何事情。

HTML：优选的接触方法选择电话电子邮件

    <div class="contact-phone-option">
        <div class="col-lg-6">
          <label>Phone</label>
          <input id="contact-phone" name="contact-phone" value="" pattern="^\(?\d{3}\)?[- .]?\d{3}[- .]?\d{4}$" type="tel" required/>
        </div>

       <div class="col-lg-6">
          <label>Best Time to Call</label>
          <input id="contact-time" name="contact-time" value="">
        </div>
    </div>

      <div class="col-lg-12 contact-email-option">
        <label>Email</label>
        <input id="contact-email" name="contact-email" value="" required type="email">
      </div>

jQuery的：

// Contact Form Dropdown menu                                                                                    
$('.contact-phone-option, .contact-email-option').hide();
$('#contact-method-menu').change(function () {
    if ($('#contact-phone').is(':selected')) {
        $('.contact-phone-option').show();
        $('.contact-email-option').hide();
    }
    if ($('#contact-email').is(':selected')) {
        $('.contact-email-option').show();
        $('.contact-phone-option').hide();
    }
});

Answer 1

您正在检查$('#contact-phone')和$('#contact-email') :selected。因为它们是input，所以永远不会发生。您需要检查option :selected。但是，即使只需要该步骤，因为您只需要.val()的{{1}}。然后，您可以检查值并匹配“电话”和“电子邮件”。

旁注，你的小提琴缺少jQuery！

select

     // Contact Form Dropdown menu       
    $('.contact-phone-option, .contact-email-option').hide();
    $('#contact-method-menu').on('change', function() {
      if ($('#contact-method-menu').val() == 'Phone') {
        $('.contact-phone-option').show();
        $('.contact-email-option').hide();
      } else if ($('#contact-method-menu').val() == 'Email') {
        $('.contact-email-option').show();
        $('.contact-phone-option').hide();
      }
    });

另一方面注意这一行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12">
  <label>Preferred Method of Contact</label>
  <select id="contact-method-menu" name="contact-method-menu" required>
    <option value="">Select</option>
    <option value="Phone">Phone</option>
    <option value="Email">Email</option>
  </select>
</div>

<div class="contact-phone-option">
  <div class="col-lg-6">
    <label>Phone</label>
    <input id="contact-phone" name="contact-phone" value="" pattern="^\(?\d{3}\)?[- .]?\d{3}[- .]?\\
d{4}$" type="tel" required/>
  </div>
  <div class="col-lg-6">
    <label>Best Time to Call</label>
    <input id="contact-time" name="contact-time" value="">
  </div>
</div>

<div class="col-lg-12 contact-email-option">
  <label>Email</label>
  <input id="contact-email" name="contact-email" value="" required type="email">
</div>

你最终会看到这条路线的内容闪现，因为在加载jQuery之前它们不会$('.contact-phone-option, .contact-email-option').hide();。您应该考虑隐藏在CSS中，并从那里显示。您还可以将hide()和show()来电缩短为：

hide()

下拉菜单条件为jQuery中的两个选项？

1 个答案: