Вопрос по javascript. Нужно чтобы при выборе пункта селектора "Другое" появлялось еще одно поле
Никак не могу понять как сделать вроде бы простую вещь. Прочитал много в интернете, но все никак не могу "уговорить" элемент работать как нужно.
Есть вот такой кусок кода:
<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>Нужно сделать так, чтобы изначально поле ручного вводы было скрыто, и только если пользователь выбрал в селекторе вариант "Другое", оно появилось и можно было ввести значение вручную. Подскажите пожалуйста как это сделать.
Вот тут нашел очень похожий вопрос: Как открыть поля по выбору определенного пункта селекта? У себя пробую, но никак не получается "уговорить" все это работать. Я вставлял код js за закрывающим тэгом а код стилей вставлял и в код самого запускаемого файла html и в файл со стилями. Все равно не работает. Кажется там решение есть, я просто не понимаю куда что вставлять, чтобы все заработало... Сейчас вставил код из той ссылки вот так:
В итоге скрывать он поля скрывает, а отображать - не отображает. Помогите плз.
Ответы (1 шт):
const select = document.querySelector("#inputState");
const wrapperForAppend = document.querySelector(".wrapper-for-append");
//можно также вместо строки создать любой элемент из js
const nodeAsStringForAppend = `<div class="alternativePosition 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>`;
//при изменении срабатывает 'слушатель change', ну а дальше уже смотря какое значение в 'value' делаем то или иное
select.addEventListener("change", ({ target: { value } }) => {
const alternatePositionInDom = document.querySelector('.alternativePosition')
if(value === "Другое" && !alternatePositionInDom) {
//кроме insertAdjacentHTML есть и другие варианты
wrapperForAppend.insertAdjacentHTML('beforeend', nodeAsStringForAppend)
} else if(alternatePositionInDom) {
alternatePositionInDom.remove()
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="wrapper-for-append 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>
</body>
</html>