primer código
HTML
<div> <select class="a"> <option value="1">aaa</option> <option value="2">bbb</option> </select> <input class="b"> </div>A.js
const a = (function initA() { const a = document.querySelector('select.a'); a.addEventListener('change', function() { b.setValue(this.value); }) return { value: () => a.value } })() const b = (function initB() { const b = document.querySelector('input.b'); b.addEventListener('keyup', function (){ if (this.value.startsWith(a.value()) === false) { b.value = a.value(); } }) return { setValue: function (val) { b.value = val; } } })()Un evento que inicializa el valor de entrada con el valor de selección cuando cambia la selección, y si el valor de entrada no comienza con el valor de selección, se inicializa con el valor de selección.
Pensé que se usaría en muchos lugares, así que moví el código y lo modularicé.
Común.js
export function initA() { const a = document.querySelector('select.a'); a.addEventListener('change', function() { b.setValue(this.value); }) return { value: () => a.value } } export function initB() { const b = document.querySelector('input.b'); b.addEventListener('keyup', function (){ if (this.value.startsWith(a.value()) === false) { b.value = a.value(); } }) return { setValue: function (val) { b.value = val; } } }A.js
const a = initA(); const b = initB();Pero ocurre un error de referencia no detectado
const a = initA(b); const b = initB(a);Lo mismo ocurre con dar una variable.
como resolver problema?
Dado que una select requiere una input para funcionar correctamente y al revés, simplemente fusionaría las dos funciones en una. Ambas funciones no son realmente independientes. También prefiero pasar los elementos en lugar de asumir select.a y input.b .
function initAB(a, b){ if(a && b){ a.addEventListener('change', function(b) { b.value = this.value }.bind(a, b)); b.addEventListener('keyup', function (a){ if (this.value.startsWith(a.value) === false) { b.value = a.value; } }.bind(b, a)); return true }; return false }; initAB( document.querySelector('select.a'), document.querySelector('input.b') ); <div> <select class="a"> <option value="1">aaa</option> <option value="2">bbb</option> </select> <input class="b"> </div>