Понимание: Если я не неправильно понимаю ваш сценарий, вы просите провести некоторую разработку интерфейса (HTML, CSS, JavaScript), чтобы варианты раскрывающегося списка изменялись в зависимости от выбора пользователя.
Объяснения модификаций Из того, что я вижу в вашем HTML , вы используете набор классов CSS, предназначенных для стилизации элемента DIV в качестве флажка, а затем устанавливаете значения с помощьюатрибут данных как способ чтения его значения.Лично я чувствую, что это немного затянуто, и вам было бы лучше сделать их флажками и просто стилизовать флажок с помощью CSS, чтобы как вам удобнее работать, если ваши флажки являются ползунковыми переключателями, то вы можете включить скрытый флажоки что значение флажка обновляется в результате взаимодействий, которые выполняет пользователь.
Поэтому я сделал мой код более простым для вас, чтобы я мог его придерживаться, я признаю, что это не самый эффективный способ его кодирования,но это рабочий пример для вас, чтобы изменить содержание вашего сердца.
Обратите внимание, что это не скрывает параметры, но запрещает пользователю выбирать их. Если вы хотите скрыть параметр, вам нужно будет перейти к каждому параметру вDIV и установите, что атрибут отображения CSS в false.Я не кодировал его таким образом, так как мне пришлось бы исследовать, как это согласуется с его совместимостью с HTML.
Код:
function checkState(x){
var Checkboxes = document.getElementsByName("checkbox");
var Options = document.getElementsByName("options");
for (i = 0; i < Options.length; i++){
Options[i].disabled = true;
}
if (Checkboxes[0].checked && Checkboxes[1].checked){
for (i = 0; i < Options.length; i++){
Options[i].disabled = false;
}
}
if (Checkboxes[0].checked && (Checkboxes[1].checked == false)){
Options[0].disabled = false;
Options[1].disabled = false;
}
if (Checkboxes[1].checked && (Checkboxes[0].checked == false)){
Options[2].disabled = false;
Options[3].disabled = false;
}
}
<form>
Cefalonia: <input name="checkbox" type="checkbox" class="facetwp-checkbox" value="cefalonia" onclick="checkState(this)"><br>
Corfù: <input name="checkbox" type="checkbox" class="facetwp-checkbox" value="corfù" onclick="checkState(this)">
</form>
<div class="facetwp-facet facetwp-facet-localita_di_corfu facetwp-type-
dropdown" data-name="localita_di_corfu" data-type="dropdown">
<select class="facetwp-dropdown">
<option name="options" value="ipsos" disabled>Ipsos</option>
<option name="options" value="acharavi" disabled>Acharavi</option>
<option name="options" value="dassia" disabled>Dassia</option>
<option name="options" value="gouvia" disabled>Gouvia</option>
</select>
</div>
Понимание происходящего Во-первых, у нас нет идентификатора или имен, присвоенных опциям, это важно, потому что у вас нет способавыбрать элемент в JavaScript без него (если только не используется библиотека JS с предварительно закодированной функцией, такой как jQuery, которая проверяет каждый параметр на странице, что может замедлить работу веб-сайта, особенно если у вас есть несколько форм в другом месте на вашем веб-сайте).
Учитывая, что идентификаторы должны быть уникальными, я дал элементам имя, таким образом мы можем выбрать все из них и скомпилировать их в массив, который затем мы можем циклически проходить и отключать все или включать все на основена обоих флажках, выбранных или нет.
Поскольку я предполагаю, что это только две доступные опции, я сделал различные операторы if, в противном случае потребовался бы оператор switch, который был бы более эффективным, если их больше, чемпросто kefelonia и corfu как варианты выбора, потому что вы не указали это в yнаше описание к вашему вопросу.
Затем мы зациклим каждое значение и включим или отключим опцию, основываясь на выбранном флажке.
Сначала отключим их все, таким образом, если там не выбраны все поляотключено Если мы выберем все параметры, мы включим все. Если мы не сделаем этого, отобразится только то, что имеет отношение