怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 342 JQUERY DREAMWEAVER
怎么根据下拉菜单的值弹出不同的界面
来源：互联网
2023-03-17 00:46:42 版权归原作者所有，如有侵权，请联系我们
怎么根据下拉菜单的值弹出不同的界面
使用html 和jquery来演示
工具/原料
- html
- jquery
方法/步骤
使用visual studio code
新建一个html文件
创建一个下拉选单
我们在下拉选单中,添加3个下拉选单项
option value="1">界面1/option>
option value="2">界面2/option>
option value="3">界面3/option>
在页面中引入jquery
如果不想下载js文件,可以引入CDN
编写jquery
根据我们选择的不同的下拉选单的值来显示不同的界面
这里为了演示我们使用不同的颜色来代表不同的界面
界面1 使用blue
界面2 使用yellow
界面3 使用gray
我们定义三个style来区别
颜色的代码如下
.blue {
background-color: lightskyblue;
}
.yellow {
background-color: yellow;
}
.gray {
background-color: gray;
}
撰写下拉选择的切换逻辑
为了便于演示,我们在下拉选单中在添加一个请选择的项目
创建一个界面框
简单的使用一个div来演示
一开始的画面效果如下
撰写下拉选单的逻辑
使用不同的颜色来代表不同的界面
script type="text/javascript">
$(function () {
$("select").on("change", function () {
console.log($(this).val());
switch ($(this).val()) {
case "1": // 界面1
$("#content p").text($("select option:selected").text());
$("#content").addClass("blue");
break;
case "2": // 界面2
$("#content p").text($("select option:selected").text());
$("#content").addClass("yellow");
break;
case "3": // 界面3
$("#content p").text($("select option:selected").text());
$("#content").addClass("gray");
break;
default:
$("#content").removeClass();
$("#content p").text("");
break;
}
});
});
/script>
接下来就看是演示
当我们选择界面1时,就会呈现蓝色框
当我们选择界面2时,就会呈现黄色框
当我们选择界面3时,就会呈现灰色框
完整的代码如下
!DOCTYPE html>
html lang="en" xmlns="http://www.w3.org/1999/xhtml">
head>
meta charset="utf-8" />
title>/title>
script src="http://code.jquery.com/jquery-2.1.1.min.js">/script>
/head>
style>
#content {
border-width: 1px;
border-style: solid;
border-color: cornflowerblue;
width: 300px;
height: 300px;
}
#content p{
text-align:center;
}
.blue {
background-color: lightskyblue;
}
.yellow {
background-color: yellow;
}
.gray {
background-color: gray;
}
/style>
body>
select>
option value="">请选择/option>
option value="1">界面1/option>
option value="2">界面2/option>
option value="3">界面3/option>
/select>
div id="content">
/
/div>
script type="text/javascript">
$(function () {
$("select").on("change", function () {
console.log($(this).val());
switch ($(this).val()) {
case "1": // 界面1
$("#content p").text($("select option:selected").text());
$("#content").addClass("blue");
break;
case "2": // 界面2
$("#content p").text($("select option:selected").text());
$("#content").addClass("yellow");
break;
case "3": // 界面3
$("#content p").text($("select option:selected").text());
$("#content").addClass("gray");
break;
default:
$("#content").removeClass();
$("#content p").text("");
break;
}
});
});
/script>
/body>
/html>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：js如何写判断语句 下一篇：JS中如何删除选中复选框的行
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 330 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 374 JQUERY