jquery addClass and removeClass when an option is selected

Question

i have a select field, where i have two options in it. If an option is selected i want to add and remove Classe from a div!

On firefox its working fine, not on chrome and safari

Here is the code:

<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>

Here is the jquery for it:

$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");

    });      

});

Rory McCrossan · Accepted Answer · 2018-04-12 10:00:01Z

3

The issue is because you're adding click event handlers to option elements. This is not well supported. Instead, add a change event handler to the select and check the chosen value.

Also note that you can use toggle() with a boolean argument to show/hide the elements, instead of adding or removing classes. Try this:

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>

answered Apr 12, 2018 at 10:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rory McCrossan Over a year ago

No problem, glad to help

user3551009 · Accepted Answer · 2018-04-12 09:58:38Z

0

$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");

    }
  }); 
});

answered Apr 12, 2018 at 9:58

user3551009

1746 bronze badges

1 Comment

LovinQuaQua Over a year ago

i tried this solution, but its not working sorry - the above solution is wokring fine - thanks for help anyways

Collectives™ on Stack Overflow

jquery addClass and removeClass when an option is selected

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related