Можно ли скрыть DIV на основе значения поля выбора (поле выбора не имеет уникального идентификатора или класса). Единственный уникальный способ, который я вижу, чтобы нацелить его, это иметь 'Data-type="location"'
<div class = "bookly-form-group" data-type = "location"><label>Location</label> <div><select><option value = "0">Select location</option><option value = "3">A Club</option><option value = "4">B Club</option><option value = "1">C Club</option><option value = "6">Mobile Hire</option></select></div> </div>
В раскрывающемся коде выше, если пользователь выбирает «Mobile Hire», он должен отображать DIV, вставленный ниже... в противном случае DIV должен быть скрыт.
<div class = "bookly-form-group" data-type = "duration"><label>Duration</label> <div><select><option value = "3">3 h (£120.00)</option><option value = "4">4 h (£160.00)</option><option value = "5">5 h (£200.00)</option><option value = "6">6 h (£240.00)</option><option value = "7">7 h (£280.00)</option><option value = "8">8 h (£320.00)</option></select></div> </div>
То, чего вы хотите достичь, выполняется с помощью следующего кода:
//First Import JQuery CDN, then Following Code inside a script tag
$(document).ready(function () {
$('div[data-type = "location"] select').on('change' , (function () {
$('div[data-type = "duration"]').hide();
}));
});
Hope this helps!
Спасибо. Это успешно скрывает div, но мне нужно, чтобы он был скрыт, но затем отображался, когда выбран один из вариантов выбора («Мобильный прокат») в «местоположении». Возможно, в вашем коде есть настройка, которая говорит, что скрыть div, если выбранное значение в местоположении не содержит «Mobile Hire»,
Хорошо, проверьте новый код, я его исправил.
Обновленный код, это должно работать:
//initially hide duration div
$('div[data-type = "duration"]').hide();
$('div[data-type = "location"] select').on('change' ,(function () {
var value = $('div[data-type = "location"] select option:selected').text();
if (value === "Mobile Hire") {
$('div[data-type = "duration"]').show();
}
else {
$('div[data-type = "duration"]').hide();
}
}));
Удивительно, работает отлично! Большое спасибо! Можно ли скрыть div продолжительности сразу, а не при изменении выбора? (т. е. чтобы никто никогда не видел div длительности, если они не выбрали Mobile Hire)
Конечно, я отредактировал код, чтобы включить эту логику, пожалуйста, проверьте.
Привет, @smabrar, добро пожаловать в Stack Overflow! Отлично, что вы помогли ОП с решением, однако в следующий раз вам следует рассмотреть возможность редактирования исходного ответа вместо публикации нового ответа.
<div>
находится прямо под<select>
? На самом деле публикуйте jQuery/JavaScript и HTML как минимальный воспроизводимый пример. Хотя я подозреваю, что вашу проблему легко решить, я бы не стал играть в 20 вопросов.