Estoy usando el complemento select2 para seleccionar el menú desplegable. Tengo más de un cuadro desplegable de selección en la página y necesito aplicar la etiqueta flotante al menú desplegable seleccionado.
Lo intenté y busqué en Google, pero no pude encontrar los resultados deseados como esperaba.
He proporcionado el código que he probado hasta ahora.
HTML
<div class="container"> <div class="row"> <div class="col-md-6 col-lg-6 col-sm-6"> <label class="hor-menu visible-xs visible-xs control-label col-sm-1"></label> <div class="form-group form-md-line-input form-md-floating-label" style="margin-top: 13px;"> <select name="cboNGrp" id="cboNGrp" class="form-control select2me input-xlarge" data-live-search="true" data-size="8"></select> <label class="form_control_1 head_ctrl_label" style="padding-top: 2px;">Type</label> </div> </div> <div class="col-md-6 col-lg-6 col-sm-6"> <div class="form-group form-md-line-input head_ctrl"> <label class="hor-menu visible-xs visible-xs control-label col-sm-1"></label> <select name="cboEmrGrp" id="cboEmrGrp" class="select2me form-control input-xlarge"></select> <label class="form_control_1 head_ctrl_label">E / M</label> </div> </div> </div> </div>JS
$('.select2me').click(function(e){ if($(this).find('select2-dropdown-open')) { $('label.head_ctrl_label').css('margin-top', '-25px'); } e.preventDefault(); });Imagen que muestra que el usuario hace clic en el menú desplegable para seleccionar la opción
¡Espero que esto te ayudará!
$('select').select2().on('select2:open', (elm) => { const targetLabel = $(elm.target).prev('label'); targetLabel.addClass('selected'); }).on('select2:close', (elm) => { const target = $(elm.target); const targetLabel = target.prev('label'); const targetOptions = $(elm.target.selectedOptions); if (targetOptions.length === 0) { targetLabel.removeClass('selected'); } });SCSS
label { &.selected { top: 0; font-size: 11px; transform: translateY(0); } font-size: 16px; color: #dfdfdf; position: absolute; z-index: 1; top: 50%; left: 15px; transform: translateY(-50%); transition: all 0.2s ease 0s; }Prueba lo siguiente
$('.select2me').click(function(e){ if($(this).find('select2-dropdown-open')) { $(this).next('.head_ctrl_label').css('margin-top', '-25px'); } e.preventDefault(); });