Здравствуйте. Ника не могу понять как сделать вроде бы простую вещь. Прочитал много в интернете, но все никак не могу "уговорить" элемент работать как нужно.
Есть вот такой кусок кода:
<div class="col-md-6">
<label for="inputState" class="form-label px-4">Должность</label>
<select name="inputState" id="inputState" class="form-select px-4">
<option></option>
<option value="Должность 1">Должность 1</option>
<option value="Должность 2">Должность 2</option>
<option value="Должность 3">Должность 3</option>
<option value="Должность 4">Должность 4</option>
<option value="Должность 5">Должность 5</option>
<option value="Другое">Другое</option>
</select>
</div>
<div class="col-md-6">
<label for="hand_input" class="form-label">Введите вашу должность</label>
<input name="hand_input" type="text" class="form-control" id="hand_input" placeholder="Должность">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Следующий шаг</button>
</div>
Нужно сделать так, чтобы изначально поле ручного вводы было скрыто, и только если пользователь выбрал в селекторе вариант "Другое", оно появилось и можно было ввести значение вручную.
Подскажите пожалуйста как это сделать.