极客教程如何在jQuery中使用下拉菜单显示div元素
为了在jQuery中通过选择特定的下拉菜单来显示特定元素的数据/内容，我们可以使用以下方法。
1.使用hide()和show()方法。
* hide()方法：该方法用于隐藏语法或你想隐藏的html元素。
语法:
$(selector).hide(speed, callback);
- show()方法：该方法用于显示你希望用户看到的语法或html元素。
语法:
$(selector).show(speed, callback);
步骤:
- 下拉菜单的选择器名称与用于显示内容的元素相同。
- 使用.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>
输出:
语法:
$(selector).css(property)
步骤:
- 下拉菜单的选择器名称与用于显示内容的元素相同。
- 使用.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>
输出:
在选择任何单选按钮之前：
选择单选按钮后：
