2

Colegas tengo el siguiente multiselect:

Multiselec

Pero estoy intentando programar el boton de seleccionar todo y esta es la función que me desarolle:

function selected_all(select_id){

    var obj = document.getElementById(select_id);

    for(var i = 0; i < obj.options.length; i++){
        obj.options[i].selected = true;

    }
}

Esta función la probe y selecciona todos lso elementos que tiene el multiselect pero no me lo envia hacia el otro cuadro.

Que pudiera estar haciendo mal??

1 respuesta 1

7

Colocar elementos de un multiselect en otro lugar

Nota: las hojas de estilos definidas acá no forman parte parte de la solución. Su objetivo es ayudar a visualizar los elementos sobre los que se interactuarán para facilitar la comprensión de lo que se hace con JavaScript.

Estuve analizando el siguiente fragmento:

function selected_all(select_id) {
  var obj = document.getElementById(select_id);
  for (var i = 0; i < obj.options.length; i++) {
    obj.options[i].selected = true;
  }
}

Y cumple efectivamente con seleccionar las opciones del elemento select de origen. Sin embargo, no se obseva que lo envía hacia un elemento HTML de destino (select en este caso).

Por ejemplo, solamente selecciona los elementos:

obj.options[i].selected = true;

Pero, para enviarlo hacia el otro elemento, deberías escribir la siguiente sintaxis:

elementoDestino.append( obj.options[i] );

El método append( elementoHTML ) del elemento de destino es la que hace posible lo que se intenta buscar.

Sin embargo, si intenta enviar directamente el elemento desde su origen hacia su destino:

seleccionar.onclick = () => {
  for (let elemento of origen)
    destino.append(elemento);
}

deseleccionar.onclick = () => {
  for (let elemento of destino)
    origen.append(elemento);
}
<select id="origen" multiple>
  <option value="">Valor 1</option>
  <option value="">Valor 2</option>
  <option value="">Valor 3</option>
  <option value="">Valor 4</option>
</select>

<select id="destino" multiple></select>

<hr>

<button id="seleccionar">Seleccionar Todo</button>
<button id="deseleccionar">Deseleccionar Todo</button>

Se observarán resultados no deseados porque cambia la longitud de la colección de elementos que recorre el bucle; pero pueden resolverse de cualquiera de las dos formas:

  • Obteniendo los elementos option que forman parte del elemento select de origen mediante:

    const elementos = document.querySelectorAll( "#origen option" );
    
  • O almacenar en un Array los elementos obtenidos:

    let elementos = [];
    
    for ( let option of origen )
      elementos.push( option );
    

Si utilizamos cualquiera de las dos formas anteriormente mencionadas obtendremos los siguientes resultados deseados:

const elementos = document.querySelectorAll("#origen option");

seleccionar.onclick = () => {
  for (let elemento of elementos)
    destino.append(elemento);
}

deseleccionar.onclick = () => {
  for (let elemento of elementos)
    origen.append(elemento);
}
select {
  width: 100px;
}
<select id="origen" multiple>
  <option value="">Valor 1</option>
  <option value="">Valor 2</option>
  <option value="">Valor 3</option>
  <option value="">Valor 4</option>
</select>

<select id="destino" multiple></select>

<hr>

<button id="seleccionar">Seleccionar Todo</button>
<button id="deseleccionar">Deseleccionar Todo</button>

Realizando pruebas

Teniendo claro lo anteriormente expuesto en esta publicación desarrollaremos un ejemplo mucho más completo como propuesta, a la vez, un poco más complejo, que será documentado mediante comentarios insertados en el código.

Visualmente se verá así:

Tome en cuenta que el botón que tiene la doble flecha permite intercambiar de lugar los elementos seleccionados y los botones Seleccionar Todo y Deseleccionar Todo cambiarán de lugar todos los elementos option contenidos en el elemento select.

Antes de empezar, describamos las dos funciones que vamos a utilizar:

  • intercambiarDestino( _origen, _destino ): esta función permitirá intercambiar origen y destino del elemento seleccionado por el usuario. El parámetro _origen es el elemento de origen, mientras que el parámetro _destino es el elemento de destino.

  • origenDestino( _origen, _destino ): esta función permitirá enviar todos los elementos contenidos en el select de origen hacia el elemento select de destino; donde el parámetro _origen es el elemento select de origen, mientras que _destino es el elemento select de destino.

Sin más preámbulos visualicemos el siguiente ejemplo ejecutable:

// Es una función que permitirá cambiar los elementos
// seleccionados de un lugar a otro:
const intercambiarDestino = (_origen, _destino) => {
  // Se evalúa si los parámetros son válidos
  if (typeof _origen === "undefined" || _origen === null) return;
  if (typeof _destino === "undefined" || _destino === null) return;

  // Array donde se almacenrán los elementos «option» que 
  // forman parte del elemento «select»
  let elementosA = [],
    elementosB = [];

  // Almacenamos en el array «elementosA» todos los elementos
  // del primer elemento «select»:
  for (let elemento of _origen)
    // Se evalúa que previamente haya sido seleccionado:
    if (elemento.selected) {
      elemento.selected = false;
      elementosA.push(elemento);
    }

  // Almacenamos en el array «elementosB» todos los elementos
  // del segundo elemento «select»:
  for (let elemento of _destino)
    // Se evalúa que previamente haya sido seleccionado:
    if (elemento.selected) {
      elemento.selected = false;
      elementosB.push(elemento);
    }

  // Trasladamos todos los elementos enviados a «elementosA»
  // hacia el segundo «select»:
  for (let elemento of elementosA)
    _destino.append(elemento);

  // Trasladamos todos los elementos enviados a «elementosB»
  // hacia el primer «select»:
  for (let elemento of elementosB)
    _origen.append(elemento);

  // Vaciamos los arrays de todos los elementos que hayan
  // sido enviados hacia ellos:
  elementosA = [];
  elementosB = [];
};


// Esta función cambia todos los elementos de 
// un lugar a otro:
const origenDestino = (_origen, _destino) => {
  // Se evalúa que los parámetros sean válidos:
  if (typeof _origen === "undefined" || typeof _origen === "null" || typeof _destino === "undefined" || typeof _destino === "null")
    return;

  // Almacenar todas las opciones del elemento 
  // «select» de origen para intercambiarlos
  // en el elemento «select» de destino:
  let opciones = [];
  for (let opcion of _origen) {
    opciones.push(opcion);
    opcion.selected = false;
  }

  // Enviamos todos los elementos almacenados previamente en
  // el array «opciones» hacia el elemento «select» de destino:
  for (let opcion of opciones)
    _destino.append(opcion);

  // Vaciamos el array opciones de los elementos del 
  // «select» origen:
  opciones = [];
};

// Cuando el usuario presiona el botón intercambiar (que tiene
// doble flechas) puede cambiar elementos seleccionados de un 
// lugar a otro:
intercambiar.onclick = () => {
  intercambiarDestino(input, output);
};

// Mueve todos los elementos «options» hacia el otro elemento:
seleccionar.onclick = () => {
  origenDestino(input, output);
}

// Realiza la misma acción que la anterior, pero al revés:
deseleccionar.onclick = () => {
  origenDestino(output, input);
}
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css";
:root {
  --color: #0080d4;
  font-family: "Open Sans", sans-serif, arial;
}

button {
  border: 0;
  margin: 0;
  line-height: 1;
  margin: 20px auto;
}

select {
  padding: 5px;
  min-height: 200px;
  border-radius: 5px;
  border: 1px solid var(--color);
  width: 100%;
  background-color: rgba( 0, 128, 213, 0.1);
}

option {
  padding: 10px 5px;
  color: #0080d4;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  background-color: rgba( 255, 255, 255, 0.9);
}

option:not(:first-of-type) {
  border-top: 1px solid rgba(0, 128, 213, 0.3);
}

hr {
  margin: 20px auto;
  border: 0;
  border-bottom: 1px solid;
}

.botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: rgba( 0, 128, 213, 0.1);
}

.botones__item {
  border-radius: 5px;
  background-color: #0080d4;
  color: white;
  height: 33px;
}

.botones__item:hover {
  background-color: #0080e2;
}

.botones__item:not(:first-of-type) {
  margin-top: 2px;
}

.flex,
.flex__item--boton {
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
  min-height: 100px;
  max-width: 1024px;
  margin: 20px auto;
  /* Propiedades temporales: */
  padding: 5px;
  /* Espacio disponible para el botón de intercambio */
  --width: 50px;
}

.flex__item {
  background-color: rgba( 255, 255, 255, 0.3);
  flex-basis: calc( 50% - var(--width) / 2);
}

.flex__item--boton {
  background-color: white;
  flex-basis: var(--width);
}
<div class="flex">
  <div class="flex__item">
    <label class="flex__item">
      <p>Permisos disponibles:</p>
      <select id="input" multiple>
        <option value="1">Navegar Usuarios (Lista y navega todos los usuarios del sistema)</option>
        <option value="2">Crear Usuario (sin descripción)</option>
        <option value="3">Editar Usuario (sin descripción)</option>
        <option value="4">Mostrar Usuario (sin descripción)</option>
        <option value="5">Eliminar Usuario (sin descripción)</option>
      </select>
    </label>

    <div class="botones">
      <button id="seleccionar" class="botones__item">Seleccionar Todo &nbsp;<i class="fas fa-chevron-circle-right"></i></button>
    </div>
  </div>

  <div class="flex__item flex__item--boton">
    <button id="intercambiar" class="botones__item"><i class="fas fa-exchange-alt fa-lg"></i></button>
  </div>

  <div class="flex__item">
    <label class="flex__item">
      <p>Permisos Asignados:</p>
      <select id="output" multiple></select>
    </label>

    <div class="botones">
      <button id="deseleccionar" class="botones__item"><i class="fas fa-chevron-circle-left">&nbsp;</i>Deseleccionar Todo</button>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.