0
135
VistasCómo establecer el valor de un elemento de opción en una selección creada dinámicamente en una tabla a medida que se crea
Estoy creando dinámicamente una lista desplegable en una tabla y quiero establecer el valor del menú desplegable en el valor actual (el usuario puede cambiarlo a uno de los otros valores). La fila se ve así (hay varias filas):
En este caso el valor de PAR inicialmente debería ser 2 (cada fila puede tener un valor inicial diferente).
El código es:
html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>" for (let i = 0; i <= paraArray; i++) { html += "<option name='parRatingOption' value='" + parRatingArray[i] + "'>" + parRatingArray[i] + "</option>" }; html += "</select></td>"; // set the current option to this.parRating3 Respuestas
Responde la pregunta0
Parece que necesita agregar el atributo "seleccionado" a la <option> , que necesita
Algo como esto:
html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"; let selectedValue = "2"; // <-- let selected = ""; for (let i = 0; i <= paraArray; i++) { selected = parRatingArray[i] == selectedValue ? " selected " : ""; html += "<option "+selected+" name='parRatingOption' value='" + parRatingArray[i] + "'>" + parRatingArray[i] + "</option>" }; html += "</select></td>";// establece la opción actual en this.parRating
0
Puedes usar literales de plantilla:
html += `<option name='parRatingOption' value='${parRatingArray[i]}'>${parRatingArray[i]}</option>`Esto también ayuda a evitar uniones de cuerdas incómodas. La mejor práctica sería crear una función que genere n número de opciones con una seleccionada:
const generateOptions = (n, selectedOne) => { let options = '' for(let i=0; i<n; i++){ options+=`<option name='parRatingOption' ${i===selectedOne ? 'selected' : ''} value='${parRatingArray[i]}'>${parRatingArray[i]}</option>` } return options; } html+=`<td style='width : 1%; white-space: nowrap;'> <select name='parRating'> ${generateOptions(5, 2)} </select> </td>`Esto genera dinámicamente 5 entradas con la segunda seleccionada
0
Modifiqué las respuestas de Abdullokh y Alex y agregué "seleccionado" al elemento de opción:
html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>" for (let i = 0; i <= paraArray; i++) { if (this.parRating == parRatingArray[i]) { // set the current option to this.parRating html += "<option selected name='parRatingOption' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>" }else { html += "<option name='parRatingOption' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>" } }; html += "</select></td>";