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:
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.
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.
- 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.
- 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")) {
- 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á.
- 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.
- 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.
Por cierto, este input dudo que haga falta en este contexto:
<input type="hidden" value="8" name="valor" id="name">
pues no hace nada ni se usa para nada, pero lo he dejado porque ya tiene un valor que no se para que lo usas.
Ya me dirás si te sirve.