Tengo un selector de selección de arranque:
<div id="maindiv"> <div class="hidden"> <select class="form-control selectpicker communitySelect " multiple="true"> <option selected value="0">All Communities</option> </select> </div> </div>Intento clonar este div oculto e intento agregar/eliminar opciones de selección en el div clonado:
var $pickerdiv = $("div.hidden").clone(); $pickerdiv.removeClass("hidden"); $("#maindiv").append($pickerdiv); var $communitySelector = $pickerdiv.find(".selectpicker"); $communitySelector.selectpicker(); $communitySelector.find('option').remove(); $communitySelector.selectpicker('refresh');Pero después del método de actualización del selector de selección, se duplica en la interfaz de usuario: https://jsfiddle.net/v660Lb4p/8/
Entonces, ¿cómo resolver esto?
RESUELTO: El complemento Selectpicker de Bootstrap se aplicó automáticamente a los elementos con la clase Selectpicker. Así que eliminé esta clase y... ¡está funcionando ahora! https://jsfiddle.net/v660Lb4p/16/
Necesitamos cambiar la clase selectpicker a otro nombre de clase para que este problema se haya resuelto. También trabajo con bootstrap-select y encontré este problema debido a selectpicker ("actualizar"). así que cambié el nombre de la clase y funciona bien. :-)
Esto ya se informa en el repositorio de github bootstrap-select. https://github.com/snapappointments/bootstrap-select/issues/1413
Cuando clona un objeto, puede pasar parámetros adicionales según la documentación: https://api.jquery.com/clone/#clone-withDataAndEvents
Un valor booleano que indica si los controladores de eventos deben copiarse junto con los elementos. A partir de jQuery 1.4, los datos de los elementos también se copiarán.
Así que mi sugerencia es usar la siguiente línea:
var $pickerdiv = $("div.hidden").clone(true);