I have a select (dropdown) and an input. When I enter a number at input, select value change with that number:
<input id="input" type="text" name="selectChanger">
<select id="select">
<option value="" selected></option>
<option value="0">floor 0</option>
<option value="1">floor 1</option>
<option value="2">floor 2</option>
</select>
I want when change select value, display an alert:
document.getElementById('input').addEventListener('input', function (event){
let de = new Event('change');
document.getElementById('select').dispatchEvent(de);
document.getElementById('select').value = document.getElementById('input').value;
})
document.getElementById('select').addEventListener('change', function (event){
alert(document.getElementById('select').text + ' was selected.')
})
Now when input number 0 , display was selected, and then input number 1 display floor 0 was selected but must display floor 1 was selected.
How can I fix this problem?
I think this will help you.
document.addEventListener('DOMContentLoaded', event => {
const target_input = document.querySelector('#input'),
target_select = document.querySelector('#select');
if (target_input != null) {
target_input.addEventListener('input', event => {
const { target } = event;
for (const node of [...target_select.childNodes]) {
if (node.nodeType == 1) {
if (node.value == target.value) {
node.selected = true;
alert(`${node.textContent} is selected`)
break;
}
}
}
})
}
});<input id="input" type="text" name="selectChanger">
<select id="select">
<option value="" selected></option>
<option value="0">floor 0</option>
<option value="1">floor 1</option>
<option value="2">floor 2</option>
</select>