If an element has two classes, it adds the class to another element

Question

The goal is to display and disappear the "Monthly" item. This only applies to annuities. I can only intervene through js. (I can't add to the element hard via html id class etc.) All only via js.

Can someone please advise me? Both html and css are almost the same as here. Please try to derive it from the example.

(function($) {  $('label[for="prop_label"]').parent().addClass("none-block"); //ADD none-block class
  $('#prop_status').children().last().addClass("active"); //ADD active class

  $('#prop_status').change(function() {
    $('option:selected', this).addClass('selected').siblings().removeClass('selected');
  });

})(jQuery);

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

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

<select name="prop_status[]" data-size="5" id="prop_status" class="form-control" title="Choose" data-selected-text-format="count > 2" data-none-results-text="data none results {0}" data-live-search="true" data-actions-box="true" data-select-all-text="Select all"
  data-deselect-all-text="Deselect all" data-count-selected-text="{0} Method" tabindex="null">
  <option class="bs-title-option" value=""></option>
  <option value="">Choose</option>
  <option value="212"> Sale</option>
  <!---- NEXT OPTION = here I have to create a toggle (display none / block) display block, only when the "Rent" option is active ---->
  <option value="211" class="selected active"> Rent</option>
</select>

<!---- NEXT ELEMENT = here I have to create a toggle (display none / block) display block, only when the "Rent" option is active ---->
<div class="form-group">
  <label for="prop_label">
        *Monthly    </label>

  <input class="form-control" name="prop_label" id="prop_label" value="" placeholder="monthly" type="text" readonly="">

</div>

Where is your code that tries to do this? We'll help you fix it, we won't write it for you. — Barmar, Mar 25 '22 at 00:12
What do you mean by "this only applies to annuities"? There's nothing about annuitities in the HTML. Do you mean it only applies to rentals? So `if (this.value == "211") { do what you want } else { do something else }` — Barmar, Mar 25 '22 at 00:13
I think : if (this.value == “221” selected) { label:”.prop_label” is show or display block } else {label:”.prop_label” is hide or display none} ………….. I'm sorry, I'm at work on the phone. So I'm just trying to get my idea together. If is selected rent = show prop_label / If not = hide prop_label. — Spake, Mar 25 '22 at 13:15

Lonnie Best · Answer 1 · 2022-03-25T03:06:42.247

To make Monthly not be displayed when selecting particular options in your select element, you'll need to add an event listener to that select element that runs a function each change event that sets display equal to none (on Monthy related elements) upon clicking those particular options.

I realize my answer is only conceptual, but that's all I have time for, and I'm hoping this offers guidance until someone else offers a more concrete answer for you.

If an element has two classes, it adds the class to another element

1 Answers1