Estoy tratando de seleccionar un valor de entrada de la lista seleccionada. El valor de entrada (tipo de papelería) que contiene espacios o corchetes no se está seleccionando. ¿Cuál es el problema con mi código? seleccionado.
function random() { const input = document.querySelector('[name="stationerytype[]"]'); input.value = "" var a = document.getElementById('purpose').value; if (a === "Meeting") { var datalist = "datalist1"; } else if (a === "Departmental") { var datalist = "datalist2"; } const options = Array.from(document.getElementById(datalist).options).map(option => option.value); input.setAttribute("list", datalist); input.setAttribute("pattern", options.join('|')); } function ondataListSelect() { const input = document.getElementById('stationerytype'); if (!input.validity.valid) { input.value = ''; } } <select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required > <option></option> <option value="Meeting">Meeting</option> <option value="Departmental">Departmental</option> </select> <td> <input type="text" name="stationerytype[]" id="stationerytype" class="form-control" onchange="ondataListSelect()" autocomplete="off" required> <datalist id="datalist1"> <option value=""></option> <option value="MEETING PEN">MEETING PEN</option> <option value="NOTEPAD">NOTEPAD</option> <option value="PLASTIC FOLDER">PLASTIC FOLDER</option> </datalist> <datalist id="datalist2"> <option value=""></option> <option value="A4 GREEN REAM">A4 GREEN REAM</option> <option value="A4 WHITE REAM">A4 WHITE REAM</option> <option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option> </datalist> </td>Esto se debe a que ( y ) tienen un significado especial en expresiones regulares, pero concatena todos esos valores directamente con un | entre. Debe escapar adecuadamente cualquier carácter especial en los valores, que no deben tener su significado especial.
Usando la solución de la respuesta aceptada a ¿Existe una función RegExp.escape en JavaScript? , puede solucionar el problema cambiando lo siguiente de
const options = Array.from(document.getElementById(datalist).options) .map(option => option.value);a
const options = Array.from(document.getElementById(datalist).options) .map(option => option.value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));