jquery 选择一个选项时的 addClass 和 removeClass

Question

我有一个 select 字段，其中有两个选项。如果一个选项是 selected 我想在 div!

中添加和删除 Classe

在 firefox 上运行正常，在 chrome 和 safari

上不行

代码如下：

<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
  <option id="privat">Privatperson</option>
  <option id="firma">Firma</option>
</select>

这是它的 jquery：

$j(document).ready(function() {

    $j("#firma").click(function(){
        $j(".input-company").addClass("show");
        $j(".leweb_button_firma").addClass("hide");
        $j(".leweb_button_privat").removeClass("hide");
    }); 
    $j("#privat").click(function(){
        $j(".input-company").removeClass("show");
        $j(".leweb_button_privat").addClass("hide");
        $j(".leweb_button_firma").removeClass("hide");

    });      

});

Answer 1

$j(document).ready(function() {

  $j("#priv-firma-select").change(function(){
    if($(this).val() == "firma"){
      $j(".input-company").addClass("show");
      $j(".leweb_button_firma").addClass("hide");
      $j(".leweb_button_privat").removeClass("hide");
    }
   else{
      $j(".input-company").removeClass("show");
      $j(".leweb_button_privat").addClass("hide");
      $j(".leweb_button_firma").removeClass("hide");

    }
  }); 
});

Answer 2

问题是因为您将 click 事件处理程序添加到 option 元素。这没有得到很好的支持。相反，将 change 事件处理程序添加到 select 并检查所选值。

另请注意，您可以使用 toggle() 和 show/hide 元素的布尔参数，而不是添加或删除类。试试这个：

var $j = jQuery.noConflict();

$j("#priv-firma-select").change(function() {
  var val = $j(this).val();
  $j('.input-company, .leweb_button_privat').toggle(val == 'firma');
  $j('.leweb_button_firma').toggle(val != 'firma');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-company">input-company</div>
<div class="leweb_button_firma">leweb_button_firma</div>
<div class="leweb_button_privat">leweb_button_privat</div>

<br /><br />
<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
  <option value="privat">Privatperson</option>
  <option value="firma">Firma</option>
</select>

jquery 选择一个选项时的 addClass 和 removeClass

jquery addClass and removeClass when an option is selected

javascript

jquery

select

options