-
2021-03-07 10:25:21
前言
有时候我们需要选择下拉框中的选项后再进行一些操作,所以下面教大家怎么在下拉框选择的时候绑定事件。
普通下拉框绑定事件
html:
选项一
选项二
添加一个option的触发事件,在option中添加onclick 点来点去是不会触发事件
在select中添加onclick ,没选option呢就触发了
所以option没有触发事件,需要在select中加onchange事件
JS:
function btnChange(){
var objS = document.getElementById("pid");
var value = objS.options[objS.selectedIndex].value;
alert(value);
}
Jquery:$("#pid").change(function(){
var opt=$("#pid").val();
alert(opt);
});
Layui下拉框触发事件layui下拉框不同于原生下拉框,layui会重新渲染下拉框,所以我们着重来看一下
第一步:我们直接在下拉框添加lay-filter
第二步:js执行下面代码form.on('select(test)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
这样就可以了。
你还没有登录,请先使用 QQ登录 或 注册!
文章评论
发表评论
更多相关内容 -
基于jQuery的select下拉框选择触发事件实例分析
2020-12-29 00:07:30本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> 选项一... -
BootStrap中关于Select下拉框选择触发事件及扩展
2020-09-01 03:53:55Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。 怎么解决这个问题呢?下面小编给大家带来了BootStrap中关于Select下拉框选择触发事件及扩展,需要的朋友参考下吧 -
谈谈如何给下拉框option添加点击事件?
2021-01-13 13:22:43想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选option呢就触发了百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾...我们在用到下拉列表框select时,需要对选中的选项触发事件,其实本身没有触发事件方法,我们只有在select里的onchange方法里触发。
想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件
又在select中添加onclick 这下可好了,没选option呢就触发了
百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子....
这次记住了吧应该
当我们触发select的双击事件时,用ondblclick方法。
当我们要取得select的选中事件时,用document.all['name'].value来获取,其中name是select的名称。
如果我们要得到select的全部的值就用一个for循环来实现。
选项1
选项2
选项3
$("#myselect").change(function(){
var opt=$("#myselect").val();
...
});
Javascript获取select下拉框选中的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢?
分别使用javascript原生的方法和jquery方法
text1
text2
code:
一:javascript原生的方法
1:拿到select对象: var myselect=document.getElementById("test");
2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value: myselect.options[index].value;
4:拿到选中项options的text: myselect.options[index].text;
二:jquery方法(前提是已经加载了jquery库)
1:var options=$("#test option:selected"); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本
-
关于select下拉框选择触发事件
2018-04-20 11:12:34我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: select> option value="0" onclick="func(0)">选项一option> option value="1" onclick="func(1)">...我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下:
- <select>
- <option value="0" onclick="func(0)">选项一</option>
- <option value="1" onclick="func(1)">选项二</option>
- </select>
于是走上面的路线,客户还说了,IE8必须支持,我想想也是,XP的IE内核只能升到IE8,现在很多用户依然
舍不得XP,但是它支持onclick啊,我在ff下试过了,一点问题没有,但是一切换IE8下,告诉你,一点反应没有
然后多方查找资料,原来select 它的事件是注册在自己标签上的,不是onclick,而是onchange,子标签对低版本浏览器无效,而且也不是正规标准的写法。
- <select onchange="func()>
- <option value="0" >选项一</option>
- <option value="1" >选项二</option>
- </select>
这不是问题,jquery给你答案
- function func(){
- //获取被选中的option标签
- var vs = $('select option:selected').val();
- }
-
select下拉框选择触发事件
2021-12-03 08:59:57HTML <select onchange="func()" id="near"> <option value="">附近</option> <option value="0">选项一</option> <option value="1">... var vs = $('#near -
LayUI中select下拉框选中触发事件
2021-08-06 07:37:58SpringMvc的数据绑定流程在SpringMvc中会将来自web页面的请求和响应数据与controller中对应的处理方法的入参进行绑定,即数据绑定.流程如下: -1.SpringMvc主框架将ServletRequest对象及 ...MongoDB (二&... -
MVVM下拉框绑定触发事件
2021-06-15 10:09:22在MVVM中下拉框的绑定跟MVC的下拉框绑定基本一样,只不过在MVVM中要写多一步声明下拉框的属性来接收数据。 首先我们要在DAL层写查询下拉框所要绑定的数据值,一般下拉框的绑定都是单表里面的数据,只要单表查询就... -
vue 选择下拉框选项更改触发事件
2022-03-16 11:07:00这种情况下,可以使用change事件,当选中某一选项后,便会触发该事件。完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>... -
下拉框的触发事件分析(onchange、onfocus、onclick)
2020-04-23 22:19:46一、onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第一次)保证选择的值是改变的! 所以 selected>个人//在这要选定一个默认的值 “selected” 单位 这样在选择第二个时,值就会变即可触发... -
1、下拉框的触发事件。2、点击事件在本下拉框新增一个下拉框。
2019-11-20 15:24:58一、这里面包含οnchange="changeEvent(this)"和οnclick="addEmployeeLabelFunc();"两个事件。 <tr> <th width="30%"><b>*</b>员工标签:</th> <td width="20%"> ... -
Layui中select下拉框选中触发事件
2020-12-10 17:30:40var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() ... // select下拉框选中触发事件 form.on("select", function(data){ alert(data.value); // 获取选中的值 }); }); ... -
layui下拉框赋值默认选中后如何触发下拉框点击事件
2021-06-18 10:09:30//获取页面加载时,默认的选中值 var select = 'dd[lay-value="' + $('#1ds').val() + '"]';...//模拟鼠标选中下拉项事件 $('#1ds').siblings("div.layui-form-select").find('dl').find(select).click(); -
基于jQuery的select下拉框选择触发事件实例分析 -
2020-12-22 04:13:40基于PHP实现的事件机制实例分析,php机制实例...本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考,具体如下:我一直以来都认为,select 下拉框选择对选项 options 使用 oncli... -
点击select下拉框,触发事件
2019-09-27 13:44:08js 点击下拉框,显示现金方式 $( function (){ $( ".moneycheck select").bind('change', function (){ // console.log($(this).html());console.log($(this).val()); if ($( this ).val()==0 ){ $( this ... -
关于pyqt5如何使用下拉框中的选项触发事件(ui窗体)
2022-04-21 10:25:46接上一篇主程序文章 -
2018年在easyui的datagrid选择下拉框中点击选择触发事件。
2018-08-12 14:50:47情境再现:在easyui的datagrid选择下拉框中点击选择触发事件。 实现改变值之后出现触发事件。 分析问题: 先获得点击框的值, $(“#specialValidation”).val(); //specialValidation是选择框div的id属性 ... -
JS 实现 select中指定option选中触发事件(下拉框)
2020-12-19 13:52:52转自:http://www.cnblogs.com/moli-/p/6406170.html在用到下拉列表框...想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选option呢就触发了... -
easyUI下拉框及触发事件
2018-08-08 18:39:15自定义下拉框,使用data,将数据列表加载 &amp;lt;input type=&quot;text&quot; class=&quot;easyui-combobox&quot; style=&quot;width:125px&quot; ... -
vue实现 select 下拉框点击选项触发事件
2020-09-16 13:13:10注意不要使用 @click 点击事件会不生效,使用 @click.native ! 使用 @click.native -
javascript下拉框选项单击事件的例子分享
2020-10-24 15:13:33主要分享了一些javascript下拉框选项单击事件的例子,以及在例子中遇到的问题的解决方法,十分实用,推荐给小伙伴们参考下。 -
下拉框值触发另一个下拉框
2012-12-12 17:26:14一个下拉框的值被选中后,触发另一个下拉框状态为可选! 若值为空则为不可选! -
easyui下拉框选中触发事件
2018-04-27 17:42:56我想做的功能是,先从数据库中查询出来城市名称,以json格式传递给前端,前端使用input下拉框,接收数据,并在下拉框中显示。注意,前端传送的json数据格式是固定的,保存的城市格式是List<map>,map中... -
VUE 自定义下拉框时,点击其它区域触发事件(关闭、修改等)
2021-08-19 14:40:36VUE 自定义下拉框时,点击其它区域触发事件(关闭、修改等) this.$el是在mounted中才会出现的,在created的时候是没有的所以我们引用的时候,它指的是当前组件的的元素。$el读取的是组件实例挂载的dom元素。($el... -
JAVA给下拉菜单添加事件响应 | 学步园
2021-02-12 23:54:57第二个问题,内隐类中,如果要涉及到外部类的对象时,如果将当前对象传递进来呢?(以前我为这个问题而苦恼。)那么,这样的做法,跟你使用类的组合有什么区别? 呵呵,你热切希望实践新学的东西的心情,我能理解,...