下拉框点击触发某个事件js（select下拉框选中某一站点时，触发事件）

本文目录

• select下拉框选中某一站点时，触发事件
• 如何用javascript实现点击图片触发下拉列表事件显示内容
• 怎么让下拉框值改变时触发一个js方法
• javascript，jquery select控件的下拉触发事件是什么不是change那个，有点像input的focus
• 下拉框选择后调用js要怎么实现
• 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。

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》

js点击标题出现下拉框

我们在制作网页过程中用到列表时一般会使用《ul》或者《ol》标签，很少用刑《dl》标签，但是这个三个标签却有着不可忽视的作用，毕竟 Web标准 中要尽最大可能的使用已有的标签。它们的用途是： 《 dl》《 /dl》用来创建一个普通的列表, 《 dt》《 /dt》用来创建列表中的上层项目， 《 dd》《 /dd》用来创建列表中最下层项目， 《 dt》《 /dt》和《 dd》《 /dd》都必须放在《 dl》《 /dl》标志对之间。 我们可以用《dl》《/dl》标签写一个简单的点击事件 样式

结构

js部分

这样一个简单的点击标题出现下拉框事件就完成啦！ 希望我的理解可以给你们提供一些帮助，学识有限，如果有地方出现错误或者有更好的方法去实现，欢迎私信！

如何触发下拉框下拉事件

下面介绍两种方式，主要给出插件代码：

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包，利用上面的代码，即可实现多选下拉框的需求，截图如下：

成功完美的实现！