El objetivo es mostrar y desaparecer el elemento "Mensual". Esto solo se aplica a las rentas vitalicias. Solo puedo intervenir a través de js. (No puedo agregar al elemento duro a través de la clase de identificación html, etc.) Todo solo a través de js.
¿Puede alguien por favor aconsejarme? Tanto html como css son casi iguales que aquí. Intente derivarlo del ejemplo.
(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>Para que Monthly no se muestre al seleccionar opciones particulares en su elemento de selección , deberá agregar un detector de eventos a ese elemento de selección que ejecuta una función cada evento de cambio que establece la visualización igual a none (en elementos relacionados con Monthy ) al hacer clic en esos opciones particulares.
Me doy cuenta de que mi respuesta es solo conceptual, pero eso es todo para lo que tengo tiempo, y espero que esto sirva de guía hasta que alguien más le ofrezca una respuesta más concreta.