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