HTML下拉列表选择方法

点击下拉菜单并选择选项，会把新的选项赋值给原元素。

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>共享服务列表</title><style>.option_box{display:none;  //先把下拉菜单隐藏，点击时再显示}</style><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><body class="f-df"><div class="u_select f-dfa"><div class="select_box"><span class="ctt" id="idoGradeType">组别</span><img class="arrow" alt=""></div><ul class="option_box"><li class="option">进行中</li><li class="option">加分项</li><li class="option">减分项</li></ul>
</div><script>$(".u_select").click(function () {event.stopPropagation();$(this).children(".option_box").fadeToggle(200);});$(".u_select").on("click", ".option", function () {$(this).parent().siblings(".select_box").find(".ctt").text($(this).text())})$(document).click(function () {$(".option_box").fadeOut();});</script>
</body></html>

$(".u_select").click(function () {
event.stopPropagation();
$(this).children(".option_box").fadeToggle(200);
});

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换，即在淡入、淡出之间切换。

即点击 <div class="select_box"> 时，它的子元素中的 <ul class="option_box"> 在淡入和淡出之间切换，

event.stopPropagation(); 阻止事件的冒泡方法，不让事件向documen上蔓延，如果不加这个，下拉菜单会不停的淡入淡出。

$(".u_select").on("click", ".option", function () {
$(this).parent().siblings(".select_box").find(".ctt").text($(this).text())
})

$(".u_select").on("click", ".option", function (){}，意思是在点击 ".u_select" 时，对 ".option" 进行操作，

所以方法中的 $(this) 指的就是 ".u_select"，

siblings()列出所有兄弟元素（不含自身），siblings(".select_box") 即兄弟元素中的 ".select_box"，

text( $(this).text() ) 即将当前元素(".option")的 text 赋值给所选元素(".ctt")的 text。

$(document).click(function () {
$(".option_box").fadeOut();
});

点击页面任何位置，".option_box"都会淡出。

HTML下拉列表选择方法相关推荐

Excel 2013中单元格添加下拉列表的方法
使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了.Excel 2013较以前的版本发生了很大的变化,那么在Excel 2013是如何添加下拉列表的呢? 下 ...
c++中整形输入逗号_Excel 2013中单元格添加下拉列表的方法
使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了.Excel 2013较以前的版本发生了很大的变化,那么在Excel 2013是如何添加下拉列表的呢? 下 ...
【Unity游戏开发基础】如何在游戏菜单中实现下拉列表选择画面质量
[背景] 上一篇我们介绍了如何在菜单中创建调节音量大小的滚动条,现在我再来介绍一个游戏菜单中的常用设置,也就是下拉列表选择画面质量的功能如何实现. [步骤] 首先,在菜单UI Canvas上添加一个下 ...
软件测试--测试用例以及黑盒测试数据的选择方法
什么是测试用例测试用例分类功能(Function).界面(UI).性能(Performance).安全(Security).接口(Interface) 测试用例的定义简单的说,测试用例就是: 设 ...
html 联想下拉菜单,excel下拉菜单联想在Excel中制作具有联想能力的下拉列表的方法...
excel下拉菜单联想在Excel中制作具有联想能力的下拉列表的方法,看到标题你是不是很兴奋,这不就是你想学习的知识吗?当你掌握excel下拉菜单联想这个知识的时候你一定很兴奋,一定不会后悔看了ex ...
独家 | SVP：一种用于深度学习的高效数据选择方法
作者:Cody Coleman, Peter Bailis, and Matei Zaharia 翻译:杨毅远校对:王琦本文长度为1800字,建议阅读7分钟本文为你介绍SVP方法如何在保证识别准 ...
下拉列表 php,php数组生成html下拉列表的方法
本文实例讲述了php数组生成html下拉列表的方法.分享给大家供大家参考.具体如下: 这段代码可根据定义好的php数组动态生成一个html的下拉列表(select) //Array contents ...
php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
笔记本电源适配器的选择方法
笔记本电脑的普及给人们带来了很大的便利,然而新的烦恼又接踵而来,笔记本电源适配器丢了或者是坏了怎么办呢?有人说买一个原装的不就OK了吗?对,原装的同型号笔记本电源适配器肯定可以用,但是在很多时候买不到 ...

HTML下拉列表选择方法

HTML下拉列表选择方法相关推荐

最新文章

热门文章