Выбор поля на входе

Question

У меня проблема с полем ввода / выбора в PHP / HTML.Если пользователь пишет число в поле ввода, поле выбора должно выбрать значение автоматически.Я думал, что смогу решить эту проблему с помощью прослушивателя onchange, но я не уверен, как

<select id="name" name="name" style="width: 154px"  /><br />
            <optgroup label="Department1">
            <option value="John">John</option>
            <option value="Max">Max</option>
            <option value="Test">Test</option>
             </optgroup>
            </select><br />
            </label>
            </td>
        </tr>
        <tr>
            <td>Number*: </td>
            <td>
            <input id="number" name="number" type="text" value="" maxlength="5" required style="width: 154px"/><br />
            </td>
        </tr>
        <tr>

Answer 1

Первое событие «onchange» недоступно для текстового поля в HTML, вместо этого вы можете использовать событие «onkeyup», например: -

document.getElementById('number').addEventListener('keyup',(event) => {
    let num = parseInt(event.target.value);
    // write here the code to select the right option in drop down
});

Answer 2

попробуйте это в codepen:

const  selectBoxField = document.getElementById('name')
const fieldNumber = document.getElementById('number')

fieldNumber.addEventListener('keyup', ({target}) => {
  selectBoxField.selectedIndex = target.value-1;
});

// variant with Id's
fieldNumber.addEventListener('keyup', ({target}) => {  
  const index = Array.from(selectBoxField).findIndex(option => option.id === target.value);
  selectBoxField.selectedIndex = index; 
});

см. Рабочий пример здесь https://codepen.io/kurkov87/pen/daJBpa?editors=1111

Answer 3

вызвать событие в onblur .. я уверен, что оно будет работать

я приведу вам быстрый пример

    <select name="" id="asd">
        <option value="ashir">ashir</option>
        <option value="haroon">haroon</option>
    </select>

    <input type="text" id="input_id" onblur="func()">

JS CODE

function func(){
        var input_id = document.getElementById('input_id').value;
        document.getElementById('asd').value = input_id;
    }