下拉框点击触发某个事件js（怎么让下拉框值改变时触发一个js方法）

本文目录

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

怎么让下拉框值改变时触发一个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部分

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

下拉框选择后调用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》

如何用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》

效果如图：

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，jquery select控件的下拉触发事件是什么不是change那个，有点像input的focus

• 触发的是***elect事件

• 不能做到浏览器兼容的
  换种思路吧
  比如自己模拟实现个select

如何触发下拉框下拉事件

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

1，可以手动写js，设置下拉框为多选下拉框。

2，也可以使用对应的插件，比如zui.***y中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包，利用上面的代码，即可实现多选下拉框的需求，截图如下：

成功完美的实现！