Как отображать элементы div с помощью раскрывающегося меню в jQuery?

Опубликовано: 6 Января, 2022

Чтобы отобразить данные / содержимое определенного элемента, выбрав конкретное раскрывающееся меню в jQuery, мы можем использовать его следующими способами:

  1. Используя методы hide () и show ():
    • hide () методы: этот метод используется для сокрытия синтаксиса или элемента html, который вы хотите скрыть.
      Синтаксис:
       $ (селектор) .hide (скорость, обратный вызов);
    • Методы show (): этот метод используется для отображения синтаксиса или элемента html, который вы хотите, чтобы пользователь видел.
      Синтаксис:
       $ (селектор) .show (скорость, обратный вызов);

    Подход:

    • Имя селектора для раскрывающегося меню такое же, как у элемента, который используется для отображения содержимого.
    • Сохраните значения выбранных элементов в переменной с помощью метода .attr () .
    • Теперь проверьте элемент, выбран ли какой-либо элемент.
    • Если да, используйте метод show () для отображения элемента для выбранного элемента, в противном случае используйте метод hide () для скрытия.

    Пример 1:

    <!DOCTYPE html>
    < html >
    < head >
    < title >How to display div elements
    using Dropdown Menu in jQuery?</ title >
    < script src =
    " https://code.jquery.com/jquery-1.12.4.min.js " >
    </ script >
    </ head >
    < body >
    < center >
    < h1 style = "color:green;" >
    GeeksForGeeks
    </ h1 >
    < h3 > jQuery |
    Show and Hide div elements using Dropdown Menu</ h3 >
    < div >
    < select >
    < option >Select</ option >
    < option value = "C" >C</ option >
    < option value = "Cplus" >C++</ option >
    < option value = "Python" >Python</ option >
    < option value = "Java" >Java</ option >
    </ select >
    </ div >
    < div >
    < div class = "C GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >C</ strong >
    is a procedural programming language
    </ div >
    < div class = "Cplus GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >C++</ strong >
    is a general purpose programming language
    </ div >
    < div class = "Python GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >Python</ strong >
    is a widely used general-purpose,
    high level programming language.
    </ div >
    < div class = "Java GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >Java</ strong >
    is a most popular programming
    language for many years.
    </ div >
    </ div >
    < script type = "text/javascript" >
    $(document).ready(function() {
    $("select").on('change', function() {
    $(this).find("option:selected").each(function() {
    var geeks = $(this).attr("value");
    if (geeks) {
    $(".GFG").not("." + geeks).hide();
    $("." + geeks).show();
    } else {
    $(".GFG").hide();
    }
    });
    }).change();
    });
    </ script >
    </ center >
    </ body >
    </ html >

    Выход:
    Перед выбором любой радиокнопки:

    После выбора радиокнопки:

    Пример 2: Наряду с методом оповещения

    <!DOCTYPE html>
    < html >
    < head >
    < title > How to display div elements
    using Dropdown Menu in jQuery?</ title >
    < script src =
    " https://code.jquery.com/jquery-1.12.4.min.js " >
    </ script >
    </ head >
    < body >
    < center >
    < h1 style = "color:green;" >
    GeeksForGeeks
    </ h1 >
    < h3 > jQuery | Show
    and Hide div elements using Dropdown Menu
    </ h3 >
    < div >
    < select >
    < option >Select</ option >
    < option value = "C" >C</ option >
    < option value = "Cplus" >C++</ option >
    < option value = "Python" >Python</ option >
    < option value = "Java" >Java</ option >
    </ select >
    </ div >
    < div >
    < div class = "C GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >C</ strong >
    is a procedural programming language
    </ div >
    < div class = "Cplus GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >C++</ strong >
    is a general purpose programming language
    </ div >
    < div class = "Python GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >Python</ strong >
    is a widely used general-purpose,
    high level programming language.
    </ div >
    < div class = "Java GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >Java</ strong >
    is a most popular programming language for many years.
    </ div >
    </ div >
    < script type = "text/javascript" >
    $(document).ready(function() {
    $("select").on('change', function() {
    $(this).find("option:selected").each(function() {
    var geeks = $(this).attr("value");
    if (geeks) {
    $(".GFG").not("." + geeks).hide();
    $("." + geeks).show();
    alert("Radio button " + geeks + " is selected");
    } else {
    $(".GFG").hide();
    alert("Select an Element from Menu");
    }
    });
    }).change();
    });
    </ script >
    </ center >
    </ body >
    </ html >

    Выход:

  2. Используя метод css ():
    Метод .css (): этот метод в JQuery используется для изменения свойства стиля выбранного элемента.

    Синтаксис:

     $ (селектор) .css (свойство)

    Подход:

    • Имя селектора для раскрывающегося меню такое же, как у элемента, который используется для отображения содержимого.
    • Найдите выбранный элемент из списка с помощью метода .find () .
    • Теперь проверьте, какой элемент выбран.
    • Теперь измените свойство отображения выбранного элемента с помощью метода .css () .

    Пример:

    <!DOCTYPE html>
    < html >
    < head >
    < title >How to display div
    elements using Dropdown Menu in jQuery?
    </ title >
    < script src =
    " https://code.jquery.com/jquery-1.12.4.min.js " >
    </ script >
    </ head >
    < body >
    < center >
    < h1 style = "color:green;" >
    GeeksForGeeks
    </ h1 >
    < h3 > jQuery | Show and
    Hide div elements using Dropdown Menu</ h3 >
    < div >
    < select >
    < option >Select</ option >
    < option value = "C" >C</ option >
    < option value = "Cplus" >C++</ option >
    < option value = "Python" >Python</ option >
    < option value = "Java" >Java</ option >
    </ select >
    </ div >
    < div >
    < div class = "C GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >C</ strong >
    is a procedural programming language
    </ div >
    < div class = "Cplus GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >C++</ strong >
    is a general purpose programming language
    </ div >
    < div class = "Python GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >Python</ strong >
    is a widely used general-purpose,
    high level programming language.
    </ div >
    < div class = "Java GFG"
    style="padding: 30px;
    margin-top: 30px;
    width :60%;
    background:green">
    < strong >Java</ strong >
    is a most popular programming language for many years.
    </ div >
    </ div >
    < script type = "text/javascript" >
    $(document).ready(function() {
    $("select").on('change', function() {
    $(this).find(
    "option:selected").each(function() {
    $(".C").css('display', (
    this.value == 'C') ? 'block' : 'none');
    $(".Cplus").css('display', (
    this.value == 'Cplus') ? 'block' : 'none');
    $(".Python").css('display', (
    this.value == 'Python') ? 'block' : 'none');
    $(".Java").css('display', (
    this.value == 'Java') ? 'block' : 'none');
    });
    }).change();
    });
    </ script >
    </ center >
    </ body >
    </ html >

    Выход:
    Перед выбором любой радиокнопки:

    После выбора радиокнопки:

Вопросы о Web технологиях JQuery

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Как получить данные атрибутов пользовательских элементов в jQuery?
20 Февраля, 2023
Объясните роль функции обратного вызова в AJAX.
20 Февраля, 2023
Объясните технологии, используемые AJAX.
20 Февраля, 2023
Метод jQuery undelegate()
16 Февраля, 2023
jQuery метод остановки()
16 Февраля, 2023