есть поля выбора select из дувх значений. при выборе одного из значения появляется доп поле. как сделать чтобы оно было обязательное если он есть и не обязательно если его нет
1 ответ
Пример (Если выбрано поле 1 - то показывается доп. поле и оно обязательное, если выбрано 2, то поле не обязательное и скрыть.
function change1() {
let val = $('#sel1').val(); //Получаем значение поля селект.
if (val === "1"){ //Если значение 1 то добавляем "required" и удаляем класс "hidden" , который скрывает поле, если select = 2 то скрываем и делаем не обязательным
$('#sel1').prop('required', true); // делаем обязательным поле
$('#dop1').removeClass('hidden'); // Убираем класс, который скрывает поле
} else {
$('#sel1').prop('required', false); // делаем не обязательным
$('#dop1').addClass('hidden'); // Добавляем класс, который скрывает поле.
}
}
.bobik{
background: #9ED3E9;
font-weight: bold;
}
.hidden {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel1" class="bobik" onchange="change1()">
<option>1</option>
<option>2</option>
</select>
<div id="dop1" required>Дополнительное поле</div>
Вот второй пример для наглядности(Добавил в случае выбора первого селекта - скрытие поля и убирание обязательности, чтобы можно было вернуть)
function change1() {
let val = $('#sel1').val(); //Получаем значение поля селект.
if (val !== ""){ //Если значение 1 2 или 3 то добавляем "required" и удаляем класс "hidden" , который скрывает поле, если поле ""(первый селект) То скрываем и делаем не обязательным
$('#sel1').prop('required', true); // делаем обязательным поле
$('#dop1').removeClass('hidden'); // Убираем класс, который скрывает поле
} else {
$('#sel1').prop('required', false); // делаем не обязательным
$('#dop1').addClass('hidden'); // Добавляем класс, который скрывает поле.
}
}
function change2() {
let val = $('#sel2').val();
if (val !== ""){
$('#sel2').prop('required', true);
$('#dop2').removeClass('hidden');
} else {
$('#sel2').prop('required', false);
$('#dop2').addClass('hidden');
}
}
<style>
.bobik{
background: #9ED3E9;
font-weight: bold;
}
.hidden {
visibility: hidden;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel1" class="bobik" onchange="change1()">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div id="dop1" class="hidden">Дополнительное поле</div>
<select id="sel2" class="bobik" onchange="change2()">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div id="dop2" class="hidden">Дополнительное поле</div>
Вот пример с одним селектом, как указано в вопросе: