Skip to main content
1 de 2
masterguru
  • 16k
  • 5
  • 15
  • 28

Esta es mi sugerencia para arreglar tu código

let name = []

function toggle(o) {
  var el = document.querySelector("#option");
  var el2 = document.querySelector("#list");

  if ((o.value != "") && (o.value != "Termine") && (o.value != "no") && (o.value != "Reset")) {
    name.push(o.value);
    el.options[el.selectedIndex].setAttribute("disabled", "disabled");
  }
  if (o.value == "Termine") {
    el2.value = name;
    // aqui se deberian enviar los datos mediante un submit del formulario o peticion ajax
  }
  if (o.value == "Reset") {
    el2.value = '';
    for (i = 0; i < el.options.length; i++) {
      el.options[i].removeAttribute("disabled");
    }
    name = []
  }
  console.log(name);
  console.log(el2.value);
}
<select name="option" id="option" onchange="toggle(this)">
  <option value="no" selected>Seleccione su opcion</option>
  <option value="Ana">Ana</option>
  <option value="Karla">Karla</option>
  <option value="Jose">Jose</option>
  <option value="Termine">Terminé</option>
  <option value="Reset">Resetear selección</option>
</select>
<input type="hidden" name="list" id="list" value="">
<input type="hidden" value="8" name="valor" id="name">

Explicación

He realizado los siguientes cambios, a saber:

  1. En el HTML he cambiado el evento onclick por un onchange, pues de lo contrario tenia un comportamiento anómalo solo al hacer click sin seleccionar nada aún. Tambien podria haberlo quitado y poner un addEventListener("change") de ese elemento en el javascript, pero he intentado no cambiartelo todo.

  2. En el HTML he agregado esta nueva opción:

<option value="Reset">Resetear selección</option>

porque no habia forma de empezar de nuevo si se equivocaban. Al seleccionar esta nueva opción se reseteará toda la selección actual.

  1. En el HTML he cambiado esta línea:
<input type="hidden" name="list[]" id="list[]" value="list[]" >

por esta otra:

<input type="hidden" name="list" id="list" value="">

porque no enviaremos un array [], sino una lista serializada mediante comas, por lo tanto el name lo podemos dejar en list. Tambien lo he quitado del id (allí no tenia ningun sentido) y he dejado el value en nada porque se lo asignamos mediante el javascript.

  1. En el javascript he agregado una nueva condición && (o.value != "Reset") para evitar que al seleccionar la nueva opción Resetear selección se agrege a los datos a enviar. Quedando así:
if ((o.value != "") && (o.value != "Termine") && (o.value != "no") && (o.value != "Reset")) {
  1. En el javascript he eliminado esta comprobación:
if(name.includes(o.value)==true){
    alert("Ya elegiste este elemento")
    el.value="no";
    return;
}

por ser ya innecesaria, puesto que he preferido deshabilitar las opciones seleccionadas directamente mediante:

el.options[el.selectedIndex].setAttribute("disabled", "disabled");

y asi no hace falta que el usuario adivine si está seleccionada o no, pues si esta deshabilitada es que ya lo está.

  1. En el javascript he agregado un comentario para que sepas el lugar donde debes ejecutar la petición ajax o realizar el submit del formulario (que no lo veo definido en tu código) una vez seleccionen la opción "Terminé". En ese punto es donde debes enviar los datos al PHP, los cuales se enviarán serializados, es decir, del tipo "Ana,Karla,Jose". Ese valor lo puedes recoger en el PHP mediante:
$opciones = $_POST['list'];  // o GET o REQUEST, eso ya como tu envies la info
$datos_seleccionados = explode(",",$opciones);
print_r($datos_seleccionados);

y seguir su tratamiento allí como desees.

  1. Y finalmente he agregado el código correspondiente al reseteo de las opciones al seleccionar "Resetear selección":
if (o.value == "Reset") {
  el2.value = '';
  for (i = 0; i < el.options.length; i++) {
    el.options[i].removeAttribute("disabled");
  }
  name = []
}

donde se resetean todos lo valores y se quitan todos los disabled de las opciones previamente seleccionadas, con el fin de volver a empezar una selección.

Ya me dirás si te sirve.

masterguru
  • 16k
  • 5
  • 15
  • 28