本文目录
- select下拉框选中某一站点时，触发事件
- 如何用javascript实现点击图片触发下拉列表事件显示内容
- 怎么让下拉框值改变时触发一个js方法
- js点击标题出现下拉框
- javascript，jquery select控件的下拉触发事件是什么不是change那个，有点像input的focus
- 下拉框选择后调用js要怎么实现
- 如何触发下拉框下拉事件
select下拉框选中某一站点时，触发事件
知道么？ jquery 有一个叫 change 的函数。。
《html》《head》 《meta content="charset" charset="UTF-8"》 《style type="text/css"》 .x{ } #x li{ float:left; margin: 10px; } .p{ background-color: red; } 《/style》***隐藏网址*** 《script type="text/javascript"》 $(function(){ $(’#st’).change(function(e){ var opts = $(’#x》li’); opts.removeClass(’p’); for (var i = 0; i 《= opts.length; i++) { if($(opts).text()==$(this).val()) { break; } $(opts).addClass(’p’); }; }) }); 《/script》《/head》《body》 《ul id="x"》 《li》迈皋桥《/li》 《li》红山动物园《/li》 《li》南京站《/li》 《li》新模范马路《/li》 《li》玄武门《/li》 《li》鼓楼《/li》 《li》珠江路《/li》 《li》新街口《/li》 《li》张府园《/li》 《li》三山街《/li》 《li》中华门《/li》 《li》安德门《/li》 《/ul》 《select id="st"》 《option》迈皋桥《/option》 《option》红山动物园《/option》 《option》南京站《/option》 《option》新模范马路《/option》 《option》玄武门《/option》 《option》鼓楼《/option》 《option》珠江路《/option》 《option》新街口《/option》 《option》张府园《/option》 《option》三山街《/option》 《option》中华门《/option》 《option》安德门《/option》 《/select》《/body》《/html》
如何用javascript实现点击图片触发下拉列表事件显示内容
***隐藏网址***《html》《head》***隐藏网址***《title》demo《/title》《style type="text/css"》.combox{width:200px;height:auto;position:relative;}.combox_div{width:200px;height:30px;border:1px solid darkgray;}.combox_div span.combox_text{display:inline-block;width:150px;height:30px;line-height:30px;padding-left:12px;font-size:14px;font-family:微软雅黑;color:#DDD;}.combox_div span.combox_cursor{display:inline-block;width:30px;height:30px;line-height:30px;background-color:dimgrey;text-align:center;cursor:pointer;color:white;}.combox_list{position:absolute;top:30px;left:0px;border:1px solid black;width:200px;height:auto;border-top:0px none;display:none;}.combox_list a{cursor:pointer;display:block; list-style:none;width:190px;padding:5px 0 0 10px;height:30px;line-height:30px;font-size:14px;font-family:微软雅黑;}.combox_list a:hover{background-color:#3399FF;color:white;}《/style》《/head》《body》《div class="combox"》 《div class="combox_div"》 《span class="combox_text"》按时间《/span》 《span class="combox_cursor" title="下拉菜单"》▽《/span》 《/div》 《div class="combox_list"》《a》按时间《/a》《a》按人气《/a》 《/div》《/div》《script type="text/javascript"》 var _span = document.querySelector(’.combox_cursor’),_sta = false,_a = document.querySelectorAll(’.combox_list a’); _span.onclick = function(){if(_sta){ document.querySelector(’.combox_list’).style.display = ’none’;}else{ document.querySelector(’.combox_list’).style.display = ’block’;_sta= !_sta; } for(var i=0;i《_a.length;i++){_a.onclick = function(_e){ var _combox_text = document.querySelector(’.combox_text’); _combox_text.innerHTML = _e.target.innerHTML; document.querySelector(’.combox_list’).style.display = ’none’; _sta = false;} }《/script》《/body》《/html》
效果如图：
怎么让下拉框值改变时触发一个js方法
《select onchange="alert(’选择已经更改！’)" 》《option》a《/option》《option》b《/option》《option》c《/option》《/select》
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
js点击标题出现下拉框
我们在制作网页过程中用到列表时一般会使用《ul》或者《ol》标签，很少用刑《dl》标签，但是这个三个标签却有着不可忽视的作用，毕竟 Web标准 中要尽最大可能的使用已有的标签。它们的用途是： 《 dl》《 /dl》用来创建一个普通的列表, 《 dt》《 /dt》用来创建列表中的上层项目， 《 dd》《 /dd》用来创建列表中最下层项目， 《 dt》《 /dt》和《 dd》《 /dd》都必须放在《 dl》《 /dl》标志对之间。 我们可以用《dl》《/dl》标签写一个简单的点击事件 样式
结构
js部分
这样一个简单的点击标题出现下拉框事件就完成啦！ 希望我的理解可以给你们提供一些帮助，学识有限，如果有地方出现错误或者有更好的方法去实现，欢迎私信！
javascript，jquery select控件的下拉触发事件是什么不是change那个，有点像input的focus
触发的是onselect事件
不能做到浏览器兼容的换种思路吧比如自己模拟实现个select
下拉框选择后调用js要怎么实现
《select onChange="showRight(this.value);"》 《option value="A"》A《/option》 《option value="B"》B《/option》 《option value="C"》C《/option》《/select》《select id="sub" style="display:none;"》《/select》《script》function showRight(v){ var t = document.getElementById(’sub’); document.getElementById(’sub’).style.display = ’’; switch(v){ case ’A’: t.innerHTML = ’《option value="_1"》A1《/option》《option value="_2"》A2《/option》’; break; case ’B’: t.innerHTML = ’《option value="_3"》B1《/option》《option value="_4"》B2《/option》’; break; case ’C’: t.innerHTML = ’《option value="_5"》C1《/option》《option value="_6"》C2《/option》’; break; }}《/script》
如何触发下拉框下拉事件
下面介绍两种方式，主要给出插件代码：
1，可以手动写js，设置下拉框为多选下拉框。
2，也可以使用对应的插件，比如zui.sexy中chosen插件，非常的专业好用。当然还有其他的前端插件，都是可以用的。
插件代码（对应的js包需要自己导入，这里给出关键实现代码）：
《select data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple=""》 《option value="strawberries"》草莓《/option》 《option value="apple"》苹果《/option》 《option value="orange"》橙子《/option》 《option value="cherry"》樱桃《/option》 《option value="banana"》香蕉《/option》 《option value="figs"》无花果《/option》《/select》《!-- 下面的代码为插件的具体实现 --》$(’select.chosen-select’).chosen({ no_results_text: ’没有找到’, // 当检索时没有找到匹配项时显示的提示文本 disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框 search_contains: true // 从任意位置开始检索});
导入对应的js包，利用上面的代码，即可实现多选下拉框的需求，截图如下：
成功完美的实现！
