Как отображать элементы div с помощью раскрывающегося меню в jQuery?
Опубликовано: 6 Января, 2022
Чтобы отобразить данные / содержимое определенного элемента, выбрав конкретное раскрывающееся меню в jQuery, мы можем использовать его следующими способами:
- Используя методы 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
=
</
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
=
</
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
>
Выход:
- hide () методы: этот метод используется для сокрытия синтаксиса или элемента html, который вы хотите скрыть.
- Используя метод css ():
Метод .css (): этот метод в JQuery используется для изменения свойства стиля выбранного элемента.Синтаксис:
$ (селектор) .css (свойство)
Подход:
- Имя селектора для раскрывающегося меню такое же, как у элемента, который используется для отображения содержимого.
- Найдите выбранный элемент из списка с помощью метода .find () .
- Теперь проверьте, какой элемент выбран.
- Теперь измените свойство отображения выбранного элемента с помощью метода .css () .
Пример:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>How to display div
elements using Dropdown Menu in jQuery?
</
title
>
<
script
src
=
</
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
>
Выход:
Перед выбором любой радиокнопки:
После выбора радиокнопки: