¿Cómo limito la longitud de entrada de caracteres según las opciones seleccionadas en el menú desplegable?
Ejemplo: cuando se selecciona la opción A-1 (valor), el límite de caracteres de entrada será de solo 2 dígitos (no puede escribir más de 2 dígitos) y cuando se selecciona la opción B-1 (valor), el límite de entrada será de 5 dígitos (también no puede escribir más de 5 dígitos en el cuadro de entrada) ? He intentado todo lo que he podido pero no encuentro ninguna solución.
¿Hay alguna manera de crear una función jQuery o JavaScript y establecer la longitud máxima de una entrada de número? usando la ID del cuadro de entrada y la ID de las opciones (como OptionA, OptionB, OptionC, etc.). ¡Gracias por leer y por tu ayuda!
<select id="options" name="searchtype"> </optgroup> <optgroup label="OptionA" > <option id="OptionA" value="0/2">OptionA-1</option> <option id="OptionA" value="0/4">OptionA-2</option> <option id="OptionA" value="0/0">OptionA-3</option> <option id="OptionA" value="0/1">OptionA-4</option> <option id="OptionA" value="0/5">OptionA-5</option> <option id="OptionA" value="0/3">OptionA-6</option> </optgroup> </optgroup> <optgroup label="OptionB" > <option id="OptionB" value="1/2">OptionB-1</option> <option id="OptionB" value="1/4">OptionB-2</option> <option id="OptionB" value="1/0">OptionB-3</option> <option id="OptionB" value="1/1">OptionB-4</option> <option id="OptionB" value="1/5">OptionB-5</option> <option id="OptionB" value="1/3">OptionB-6</option> </optgroup> </select> <input id="searchbox" type="number" size="40"></input>Aquí hay un ejemplo de cómo hacer eso. Guardé los valores de maxLength en un atributo data-max de cada opción. Tal vez podría almacenarlos en los valores, pero no sé, si necesita los valores por otra razón.
const select = document.querySelector("#options"); const input = document.querySelector("#searchbox"); let maxLength = 0; function setMax(input, max) { max = parseInt(max); maxLength = max; let number = ""; for (let i = 0; i < maxLength; i++) { number += "9"; } input.max = number; validateLength(input, max); } function getMax(select) { const selected = select[select.selectedIndex]; const maxLength = parseInt(selected.dataset.max); return maxLength; } function validateLength(input, length) { input.value = input.value.substr(0, length); } select.addEventListener("change", (event) => { const max = getMax(select); setMax(input, max); }); const max = getMax(select); setMax(input, max); input.addEventListener("input", () => { validateLength(input, maxLength); }); <form> <select id="options" name="searchtype"> <optgroup label="OptionA"> <option id="OptionA" value="0/2" data-max="2">OptionA-1</option> <option id="OptionA" value="0/4" data-max="2">OptionA-2</option> <option id="OptionA" value="0/0" data-max="2">OptionA-3</option> <option id="OptionA" value="0/1" data-max="4">OptionA-4</option> <option id="OptionA" value="0/5" data-max="2">OptionA-5</option> <option id="OptionA" value="0/3" data-max="2">OptionA-6</option> </optgroup> <optgroup label="OptionB"> <option id="OptionB" value="1/2" data-max="5">OptionB-1</option> <option id="OptionB" value="1/4" data-max="5">OptionB-2</option> <option id="OptionB" value="1/0" data-max="5">OptionB-3</option> <option id="OptionB" value="1/1" data-max="3">OptionB-4</option> <option id="OptionB" value="1/5" data-max="7">OptionB-5</option> <option id="OptionB" value="1/3" data-max="2">OptionB-6</option> </optgroup> </select> <input id="searchbox" type="number" size="40"> <button type="submit">Submit</button> </form>Usaría el atributo de datos HTML.
Le permite agregar valores a una etiqueta HTML. Referencia a la documentación de atributos de datos HTML .
Basado en eso, es mi solución:
const selectRef = document.getElementById('options') const inputRef = document.getElementById('searchbox') selectRef.addEventListener('change',function(e){ const selected = selectRef.options[selectRef.selectedIndex] const newMax = selected.dataset.value inputRef.setAttribute('max',newMax) }) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <select id="options" name="searchtype"> </optgroup> <optgroup label="OptionA" > <option id="OptionA" value="0/2" data-value="2">OptionA-1</option> </optgroup> </optgroup> <optgroup label="OptionB" > <option id="OptionB" value="1/2" data-value="5">OptionB-1</option> </optgroup> </select> <input id="searchbox" type="number" size="40" max=2 ></input> </body> </html>Tenga en cuenta que si el usuario ingresa datos escribiendo y no haciendo clic, la validación no los detectará. En este caso, le recomiendo que agregue un detector de eventos a la entrada y verifique el tamaño de la entrada.