Tengo este código donde quiero agregar texto al cuadro de selección al llamar a una función haciendo clic en un botón de entrada.
Quiero que el cuadro de selección tenga un texto predeterminado cuando se carga la página y no se agrega ningún valor a la matriz. Y quiero que este texto desaparezca, pero aún podría agregar muchos valores desde el cuadro de entrada y hacer que se muestren en el cuadro de selección.
Así que hice la entrada y el cuadro de selección con lo siguiente:
let num = document.querySelector('input#numtxt') let lista = document.querySelector('select#seltxt') let res = document.querySelector('div#res') let valores = [] function adicionar() { if (isNumero(num.value) && !inLista(num.value, valores)) { lista.options[0] = null // valores.push(Number(num.value)) let item = document.createElement('option') item.text = `Valor ${num.value} adicionado.` lista.appendChild(item) } else { window.alert('Valor inválido ou já existe!') } } <div> <p>TYpe a number between 1 and 100: <input type="number" name="num1" id="numtxt"> <input type="button" value="Adicionar" onclick="adicionar()"></p> </div> <div> <p> <select name="sel1" id="seltxt" size="10"> <option>Type a number above!</option> </select> </p> <p><input type="button" value="End" onclick="finalizar()"></p> </div> Probé muchos comandos con boxvar.options[0] = null y boxvar.remove(0) pero todos seguían eliminando el primer valor que necesito para el programa.
¿Alguna sugerencia?
let num = document.querySelector('input#numtxt') let lista = document.querySelector('select#seltxt') let res = document.querySelector('div#res') let valores = [] function adicionar() { if (isNumero(num.value) && !inLista(num.value, valores)) { if(!valores.length) { // If there are no values on list, delete whatever is inside of select lista.innerHTML = '' } valores.push(Number(num.value)) let item = document.createElement('option') item.text = `Valor ${num.value} adicionado.` lista.appendChild(item) } else { window.alert('Valor inválido ou já existe!') } }Esto es un poco detallado para mayor claridad: si agregamos un atributo de datos, podemos filtrarlo y eliminarlo si existe. También podemos filtrar por valores y no agregar si existe el nuevo (podría ser un atributo de datos si no quieres establecer el value ).
let lista = document.querySelector('#seltxt'); let res = document.querySelector('#res'); let valores = []; function adicionar() { let num = document.querySelector('#numtxt'); let opts = [...lista.options].filter((element, index) => { return element.dataset.default == "default"; }); console.log(opts); if (opts.length) { opts[0].remove(); } let newValue = Number(num.value); // now if it already exists, don't add it let matchOpt = [...lista.options].filter((element, index) => { return element.value == newValue; }); // we already have it so jump back out if (matchOpt.length) { return; } valores.push(newValue); let item = document.createElement('option'); item.text = `Valor ${num.value} adicionado.`; item.value = newValue; lista.appendChild(item); } <div> <p>Type a number between 1 and 100: <input type="number" name="num1" id="numtxt"> <input type="button" value="Adicionar" onclick="adicionar()"></p> </div> <div> <p> <select name="sel1" id="seltxt" size="10"> <option data-default="default">Type a number above!</option> </select> </p> <p><input type="button" value="End" onclick="finalizar()"></p> </div>