Скрыть Div на основе поля выбора, используя тип данных, а не идентификатор/класс

Можно ли скрыть 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>

<div> находится прямо под <select>? На самом деле публикуйте jQuery/JavaScript и HTML как минимальный воспроизводимый пример. Хотя я подозреваю, что вашу проблему легко решить, я бы не стал играть в 20 вопросов.

zer00ne 05.05.2022 17:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

То, чего вы хотите достичь, выполняется с помощью следующего кода:

//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»,

Matt Cooper 05.05.2022 18:38

Хорошо, проверьте новый код, я его исправил.

smabrar 05.05.2022 18:54
Ответ принят как подходящий

Обновленный код, это должно работать:

 //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)

Matt Cooper 05.05.2022 19:06

Конечно, я отредактировал код, чтобы включить эту логику, пожалуйста, проверьте.

smabrar 05.05.2022 19:11

Привет, @smabrar, добро пожаловать в Stack Overflow! Отлично, что вы помогли ОП с решением, однако в следующий раз вам следует рассмотреть возможность редактирования исходного ответа вместо публикации нового ответа.

geertjanknapen 06.05.2022 15:23

Другие вопросы по теме