精华内容
下载资源
问答
  • el-select组件绑定change事件踩坑

    千次阅读 2020-04-14 20:33:20
    要注意区分elementUI组件(比如el-select、el-button、el-input等组件)的focus、click、change等事件和DOM的focus、click、change原生事件,二者是不一样的。如果要在element组件上触发原生事件,一律都得加.native...

    要注意区分elementUI组件(比如el-select、el-button、el-input等组件)的focus、click、change等事件和DOM的focus、click、change原生事件,二者是不一样的。如果要在element组件上触发原生事件,一律都得加.native修饰符,否则无法触发事件。但是要注意很多elementUI的组件本身封装了focus、click、change等事件,比如el-button的click事件,是经过elementUI封装过的,所以给el-button绑定click事件时,不需要加.native修饰符,el-input的@focus事件也是同理。今天踩了一个坑,在给el-select绑定change事件时,没搞清楚该change事件是elementUI封装过的change事件@change=“changeGateway(event)”,发现event一直是和选中的option的value值保持一致,按照网上博客写的event.target.value拿到的值一直都是undefined,最后才发现,博客里的select是原生的select,而我写的是el-select,给el-select绑定的change事件不是dom原生的change事件,而是elementUI封装过了的change事件,回调函数的参数是下拉列表目前的选中值,所以$event才一直和选中的option的value值保持一致。另外要注意由于el-select组件已经封装了change事件,就无法再绑定原生的change事件,如果对el-select绑定change事件像@change.native这样写,change事件是不会触发的!
    在这里插入图片描述
    再次强调:elementUI组件如果已经封装过click、change、focus等事件,则无法再绑定DOM原生的click、change、focus事件,即使加.native修饰符也没用。
    在这里插入图片描述
    但今天来了个需求,在点击选择关联网关的下拉列表时,不仅要传网关name参数给后端,还要在改变option的同时再额外多传一个gatewayIp参数给后端,这个gatewayIp要在下拉列表option的数据里面拿,起初想通过给el-select组件绑定change事件拿到选中的option的完整数据,最终发现做不到,那样只能拿到选中的option的value值(因为elementUI封装的change事件的回调参数就是下拉列表目前的选中值,见上图),最后的实现思路是给el-option绑定原生click事件拿到选中的option的完整数据item,代码如下:

    <el-form-item label="关联网关" prop="bindGateName">
      <el-select v-model="form.bindGateName" placeholder="请选择" clearable>
        <el-option v-for="item in bindGates" :label="item.gateWayInfo.name" :value="item.gateWayInfo.name" @click.native="changeGateway(item)" :key="item.gateWayId"></el-option>
      </el-select>
    </el-form-item>
    
    changeGateway(data){
      // console.log(data) //此data是选中的那个option的完整数据item 
      this.form.gateWayIp = data.gateWayInfo.ip;
    },
    
    展开全文
  • Layui select(下拉框)绑定change事件

    千次阅读 2020-11-18 20:33:03
    select id='select1' lay-filter="select1"> </form> JS 代码: layui.use(['layer', 'jquery', 'form'], function () { var layer = layui.layer, $ = layui.jquery, form = layui.form; form.on...

    HMTL代码:

    <form>
        <select id='select1' lay-filter="select1">
    </form>

    JS 代码:

    layui.use(['layer', 'jquery', 'form'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
    
        form.on('select(select1)', function (data) {
            alert($("#select1").val());
        });
    });

    注:

    (1)select标签要嵌套在form标签里面。

    (2)select()里面的select1是lay-filter的属性值。

    展开全文
  • 1、使用v-model在select标签上进行数据双向绑定2、在data里边添加val:‘ ...以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • JQuery 绑定select标签的onchange事件

    万次阅读 2015-04-13 11:50:16
    JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值) $(document).ready(function(){ $('#mySelect').change(function(){ alert($(this).children('...

       JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)

    <script src="jquery.min.js" type="text/javascript"></script> 
    <script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
    $('#mySelect').change(function(){ 
    alert($(this).children('option:selected').val()); 
    var p1=$(this).children('option:selected').val();//这就是selected的值 
    var p2=$('#param2').val();//获取本页面其他标签的值 
    window.location.href="xx.php?param1="+p1+"¶m2="+p2+"";//页面跳转并传参 
    }) 
    }) 
    </script> 
    
    <select id="mySelect"> 
    <option value="1">one</option> 
    <option value="2" selected="selected">two</option> 
    <option value="3">three</option> 
    </select> 
    <input type="text" value="ooo" name="param2" id="param2"/> 
    



    <select class="selector"></select>

    1、设置value为pxx的项选中

     $(".selector").val("pxx");

    2、设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

    3、获取当前选中项的value

    $(".selector").val();

    4、获取当前选中项的text

    $(".selector").find("option:selected").text();

    这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

    很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。


    $(".selector1").change(function(){
    
     // 先清空第二个
    
      $(".selector2").empty();
    
     // 实际的应用中,这里的option一般都是用循环生成多个了
    
      var option = $("<option>").val(1).text("pxx");
    
      $(".selector2").append(option);
    
    });
    



    展开全文
  • vue select选择框数据变化监听

    万次阅读 2018-03-23 11:37:52
    1、使用v-model在select标签上进行数据双向绑定2、在data里边添加val:‘ ’, 3、最后就是监听事件的写法,写在methods之外。 附加:(以下图片借鉴他人,非原创)

    1、使用v-model在select标签上进行数据双向绑定,

    2、在data里边添加val:‘ ’,

    3、最后就是监听事件的写法,写在methods之外。

     

    附加:(以下图片借鉴他人,非原创)

    展开全文
  • 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {...
  • 1. 有时候需要实现当用户选择一个选项之后,网页上另一部分的内容就随之变化,达到动态更新的目的,这时候我们就会想到ajax来实现局部刷新,接下来用一个简单的例子演示:总共有两个select选择框,第一个是省份的...
  • 主要为大家详细介绍了BootStrap selectpicker后台动态绑定数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 监听 el-select 选择值的变化

    千次阅读 2019-09-20 11:35:50
    最近项目中需要用到监听 el-select 选择值的改变,方法很简单,@change就可以实现: 在这里插入代码片
  • select2 使用教程(简)

    万次阅读 2016-11-10 16:11:05
    用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。 在我的印象里Select22个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要...
  • 1.前台页面,我这里需要绑定三个下拉菜单 <select id="select_modelid"> </select> <select id="select_machineid"> </select> <select id="select_rawmaterial"> </...
  • angular js 的select数据绑定

    千次阅读 2017-02-22 19:59:42
    后来才知道select不用ng-repeat也能实现循环输出(ng-options,一定不要忘了末尾的s): 最初: {{item.name}} 改善: 解析: columns是一个json数组; C.a as C.b for C in array:意思是显示C的b属性,但...
  • 前言:应公司开发,某小功能的需要,所以初次接触到vuejs,摸索学习中...1.ajax请求后台数据,绑定select下拉单选框中。 2.点击下拉框,选中一栏数据,同时input从没有值变成同步更新到选中的那一栏值。 3.演示效果图
  • Angular4_Select选择改变事件

    万次阅读 2017-12-13 11:45:09
    Angular4_Select选择改变事件 、 个人感觉change没用。 所以用的ngModelChange select class="form-control customSelect" [(ngModel)]="packagingType" name="packagingType" (ngModelChange)=...
  • 发现数据绑定成功,选择变化数据也会变化,但是页面不改变,视图没有更新,通过在select代码中加入$set方法,也并没有用,视图同样没有更新;查看文档发现发现computer默认没有双向绑定 ,默认为getter 需要自己写...
  • iviewUI组件库中select双向绑定不生效

    千次阅读 2020-01-08 17:22:24
    前端小伙伴们有没有遇到过这样的场景,iviewUI组件库中select双向绑定数据时,修改了绑定值,但是页面中渲染的值还是之前的值,不管是去打印还是使用vue插件去查看变量,均显示绑定值已修改,可是页面始终显示修改...
  • 前端直接绑定值,不传参数,controller中会一直取到初始化的值,无法实时获取前端select改变的值。 解决方法一:前端调用方法的时候,一边传参数(亲测可用) <select ng-model=speed name=speed ng-change=vm....
  • vue,el-select 绑定id值

    千次阅读 2020-08-13 09:53:46
    在实际需求中,el-select的数组选项有多个,展示给用户选择的是每个选项的文本,但是传给后台的数据需要文本对应的id 比如选项数组是:applyTypeList:[{id:1,label:‘甜品’},{id:2,label:‘烧烤’}] 下拉框可选的是...
  • 中文输入法触发input事件 compositionstart 当浏览器有非直接的文字输入时, compositionstart事件触发. compositionend 当浏览器是直接的文字输入时, compositionend事件触发 解决方法: 这里还有一个问题: 在有些...
  • 【Angular2】angular2 select change 事件实现下拉联动

    千次阅读 热门讨论 2017-09-25 19:24:58
    一、实现要求 还用Angular2实现select下拉框联动的效果:二、实现过程2.1 项目结构 由于项目是使用了Angular2,前端工程化,组件化,在项目中,分成了下面的五个部分:css、html、routes、spec、component.ts。...
  • 提高页面加载速度,前端代码注意的关键点今天遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示。我写的原始代码如下: <select v-model="token...
  • 使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中的数据的时候才触发change事件要...
  • 监听select选择 form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 })...
  • <select ref="select"> <option>1</option> <option>2</option> </select> 在绑定数据之前将远程搜索数据清除 this.$refs.select.setQuery(null);
  • 才入前端,坑真的很多,简单的样式倒是很好解决,遇到稍微棘手点问题还是挺浪费时间的,这两天就遇到一个VUE修改select option绑定的数组对象却无法及时刷新页面数据问题,整整浪费了一早上的时间,这里简单做下记录...
  • 下拉框绑定及改变事件

    千次阅读 2021-05-03 10:26:29
    在项目中添加信息时会遇到很多的文本框及下拉框,最初下拉框是无数据的,需要我们绑定数据库的值才能让我们选择数据,下面我先演示下拉框的绑定 Select下拉框: 首先在页面加载事件绑定ID及方法 $(document).ready...
  • layui select下拉框改变之 change 监听事件

    万次阅读 多人点赞 2018-11-08 14:09:49
    在layui中使用 jquery 触发select 的 change事件无效   使用layui.use监听select事件    &lt;select lay-filter="demo" lay-verify="required"&gt; &lt;script&gt; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,144
精华内容 23,657
关键字:

select2选择绑定变化事件