Question

我想制作一个非常简单的jquery插件，但是我的代码仅适用于Firefox浏览器。我该如何编写其他代码，使其在Google Chrome，Opera和其他浏览器中正常工作？

如果我选择option value='business'，则删除is--hidden中的.address--company类，但是如果我选择option value='private'，则将is--hidden添加到.address--company类中

HTML：

<div class="address--customertype">
  <div class="select-field">
    <select name="address[additional][customer_type]" required="required" aria-required="true" class="is--required">
      <option value="private" selected="selected">Klient indywidualny</option>
      <option value="business">Firma</option>
    </select>
  </div>
</div>
<div class="address--company is--hidden">...</div>

jQuery：

$('select[name="address[additional][customer_type]"] option[value="business"]').click(function() {
  if ($('.address--company').hasClass('is--hidden')) {
    $('.address--company').removeClass('is--hidden');
  }
});

Answer 1

您的代码中有几个问题：

您主要需要分配一个P1事件来监听change下拉菜单中的选项更改，以使其按预期运行。
您的jQuery选择器也不正确。
您可以根据值select和private分配班级和删除班级
由于只有两个business，因此您可以使用简单的option。
此外，添加if-else可以根据选定的默认值相应地更改类。

.trigger('change')

$('select[name="address[additional][customer_type]"]').change(function() {
  if ($(this).val() === 'private') {
    $('.address--company').addClass('is--hidden');
  } else {
    $('.address--company').removeClass('is--hidden');
  }
}).trigger('change');

.is--hidden {
  color: red;
}

在html5中选择选项选择（jQuery）

1 个答案: