Tengo una barra lateral en mi página con formulario de búsqueda/filtro. Lo que trato de hacer es mover uno de los elementos (desplegable de orden de clasificación) de este formulario, fuera del formulario con CSS/JS y mostrarlo dentro de div en el lado derecho. ¿Es posible sin perder la funcionalidad de la forma? Por favor revisa mi código:
<div class="left-sidebar"> <form> <div class="move-this-outside">Dropdown is here</div> </form> </div> <div class="page-content"> <div class="sort-order-container">Here i need to drop it</div> </div> Por supuesto que puedo usar position:absolute; pero, ¿cómo hacer que este menú desplegable sea relativo a otro div fuera del formulario? El contenido de la página es flexible (paginación, banners, etc.). Tiene que estar físicamente dentro del <form></form> para que funcione, pero necesito mostrarlo (simular que se muestra) dentro de otro div.
Suponiendo que pueda ejecutar Javascript sin las mismas restricciones que con la edición del HTML para el formulario, un Javascript muy simple como este debería ser suficiente para mover el menú de select a la nueva ubicación.
Puse el código relevante dentro de setTimeout solo para que el move sea observable.
setTimeout(()=>{ /* identify the various HTML elements needed in the move process */ let form=document.querySelector('.left-sidebar > form'); let target=document.querySelector('.page-content > .sort-order-container'); /* Move the Select from original location (sidebar) to the new location */ target.appendChild( form.querySelector('.move-this-outside') ); /* set the ID of the form and associate the select with that form by ID */ form.setAttribute('id','filter'); target.firstElementChild.querySelector('select').setAttribute('form','filter'); },2500); /* To show the select has moved */ .left-sidebar{border:1px solid red;} .page-content{border:1px solid black;} .sort-order-container{border:1px solid blue;} select{background:pink} h1{font-size:1.1rem} *{padding:0.25rem;margin:0.25rem auto} <div class="left-sidebar"> <form> <h1>Select Menu was here</h1> <!-- source --> <div class="move-this-outside"> <select> <option>Hello World <option>Goodbye World </select> </div> </form> </div> <!-- other html content perhaps --> <div class="page-content"> <div class="sort-order-container"> <!-- target --> </div> </div>