How to toggleClass dependent of selecting input

Question

I have advanced work on my project generator of documents. It is simple. Someone write date and in document is written (e.x. name of company is used more 50 times, so this have so advantage).

select.onchange = function() {
  if (select == "firma") {
    $("#osoba_fizyczna").toggleClass('hidden', 'visibility');
    $('#firma').toggleClass('visibility', 'hidden');
  } else {
    $('#firma').toggleClass('hidden', 'visibility');
    $('#osoba_fizyczna').toggleClass('visibility', 'hidden');
  }
}

hidden {
  display: none;
}

visibility {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

I think `if(select == "A")` should be `if(select.value == "A")`. — kmoser, Jan 04 '22 at 15:37
Does this answer your question? [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — kmoser, Jan 04 '22 at 15:38
Please include enough HTML so your script can work. You're missing the show/hide element(s). — isherwood, Jan 04 '22 at 15:41
@kmoser, I think you are right. I wanted to note that 'this.value' should work as well :) — Wimanicesir, Jan 04 '22 at 15:41
Also, you don't need to toggle two classes to switch between display block/none - you only need to add/remove a single class and have the other as the default, eg `#firma,#osaba { display:none; }` then add/remove the `.visible` class. — freedomn-m, Jan 04 '22 at 15:43
Fixing the "typos" and *guessing* at some html, your code works fine: https://jsfiddle.net/dLx6yqn4/ Note: when using `.toggleClass` you must make sure your classes are in the correct state to start with. — freedomn-m, Jan 04 '22 at 15:45
Somewhere is mistake I do not see. I noticed that it work perfect for jsfiddel. — , Jan 04 '22 at 15:49
Deleted comment: `visible {` should be `.visible {` and `.toggleClass('hidden', 'visibility');` should be `.toggleClass('hidden visibility');` — freedomn-m, Jan 04 '22 at 16:20

Johannes · Answer 1 · 2022-01-04T16:38:05.107

First, you don't have any elements in your example which would be affected by your script and show the practical outcome. So I added two elements in the snippet below which have those IDs, the second one having the "hidden" class.

Second, use select.value in your condition instead of just select

And as a third step, I'd suggest to only use one class (in my snippet the "hidden" class) and toggle the display parameter with that - if it's removed, the element will have the default block display.

And last, CSS rules for classes need to have a dot in front of the class name to be valid class selectors.

select.onchange = function() {
  if (select.value == "Firma") {
    $('#osoba_fizyczna').toggleClass('hidden');
    $('#firma').toggleClass('hidden');
  } else {
    $('#firma').toggleClass('hidden');
    $('#osoba_fizyczna').toggleClass('hidden');
  }
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" class="hidden">This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

And actually, with just two option values you could write the function a lot simpler:

select.onchange = function() {
  $('#osoba_fizyczna, #firma').toggleClass('hidden');
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" class="hidden">This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

isherwood · Answer 2 · 2022-01-04T16:36:15.347

I think you're confused about a few things. First, toggleClass() doesn't take two class arguments. You'd toggle two as 'one two'. See https://api.jquery.com/toggleclass.

Then, classes are defined in CSS with dots at the front, as .hidden. Really, though, you don't even need to do that. Just use jQuery's show() and hide() methods.

Also, you need to target your select element by ID differently. You were targeting all select elements with a native JavaScript technique that wasn't quite right.

$('#select').change(function() {
  if ($(this).val() === "Firma") {
    $("#osoba_fizyczna").hide();
    $('#firma').show();
  } else {
    $('#firma').hide();
    $('#osoba_fizyczna').show();
  }
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="osoba_fizyczna" class="hidden">osoba_fizyczna</div>
<div id="firma" class="hidden">firma</div>

score 0 · Answer 3 · answered Jan 04 '22 at 16:08

for the Javascript part, as the toggleCalss can't take two parameters I think it is better to use the addClass and removeClass functions.

select.onchange = function() {
          if ($("#select").val() == "Firma") {
            $("#osoba_fizyczna").addClass('visibility').removeClass('hidden');
            $('#firma').addClass('hidden').removeClass('visibility');
          } else {
            $("#firma").addClass('visibility').removeClass('hidden');
            $('#osoba_fizyczna').addClass('hidden').removeClass('visibility');
          }
}

For the CSS part, I just add a dot . to mention that it is a class

.hidden {
    display: none;
}

.visibility {
     display: block;
}

For the HTML part, I add Ids for the two options

<select id="select">
                <option id="osoba_fizyczna" value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
                <option id="firma" value="Firma">firma</option>
</select>

How to toggleClass dependent of selecting input

3 Answers3