layui监听select变化,以及设置radio选中的方法

一、select监听

1.首先,要给select加一个layui提供的属性 lay-filter=“level” 这里面的level自己定义,下面会用到

2.导入form

 layui.use('form', function(){
    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
    form.on('select(level)'),function() {
    //内容
});
    form.render();//注意如果是动态添加的select ,就必须加这行代码

  });

可以不用加第一行的代码 layui.use这行

二、radio选中

首选要将layui提供的form表单放在当前函数最下面

  layui.use('form', function(){
      var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
      form.render();
    });

然后使用jquery的each 以及根据name找dom元素的方法进行设计

 $.each($("input[name='usex']") ,function (index, data) {//index是索引,从0开始

      if( data.value == '男' ) {
        // alert(usex);
        $(data).prop('checked',true);//data表示数据的内容,比如男女

      }
    })

在这里也强调下关于select的初显示,如果想让他第一次出现在你想让的显示的一个Option上也需要吧layui.use放在最下面

以上这篇layui监听select变化,以及设置radio选中的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Layui 设置select下拉框自动选中某项的方法

    1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A.在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值. 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class="layui-form-item"> <label class="layui-form-label"><span

  • 在layui框架中select下拉框监听更改事件的例子

    在select 加入红框中的代码(看不到红框的往右拖动一点) 事件监听select(这里面是上面图中红框内容   可自定义) 以上这篇在layui框架中select下拉框监听更改事件的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

    若是只引用jquery的话,监听单选按钮改变事件如下: <input type="radio" name="sex" checked="checked" value="1">男 <input type="radio" name="sex" value="2">女 $(document).ready(function() { $('input[t

  • layui问题之模拟select点击事件的实例讲解

    一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即: form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 }); 但是,这个事件需要操作页面,不可取. 三.结果 查

  • layui监听select变化,以及设置radio选中的方法

    一.select监听 1.首先,要给select加一个layui提供的属性 lay-filter="level" 这里面的level自己定义,下面会用到 2.导入form layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.on('select(level)'),function() { //内容 }); form.render();//注意如果是动态添加的select

  • layui 监听select选择 获取当前select的ID名称方法

    监听select选择 form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 }); 获取自定义属性 data.elem.getAttribute("data-id") 例子:取得ID名称 form.on('select', fu

  • 使用layui监听器监听select下拉框,事件绑定不成功的解决方法

    如下所示: 使用layui监听select所选的value 需要注意的是:form.on必须写在layui.use(){ }中 且使用layui动态添加option时,必须要进行渲染(form.render()),否则选项追加不上 这样做完之后如果还不能获取select所选的value,那就需要检查一下select所在的form表单有没有写class属性,如果没有写class属性,就监听不到select 如果在完成后台操作之后跳转页面时不显示样式了,就检查一下请求路径resultmapping后

  • layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)

    因为本身layui是有一套自身的监听方式,form.on   当然你是先将select放入<div class="layui-form">中,不然都显示不出select 里面也有监听普通下拉选框选中值发生改变的方式,直接复制即可 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

  • LayUI switch 开关监听 获取属性值、更改状态的方法

    背景 今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输 需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改 通过参考文档及网友的经验,在此整理一番 使用方法 场景: 后台商品列表页,进行上下架状态的修改 ①. html 代码参考 着重注意 我设置的两个属性值 lay-filter,switch_goods_id <input type="checkbox" class="switch_checke

  • 解析SQL Server CDC配合Kafka Connect监听数据变化的问题

    解析SQL Server CDC配合Kafka Connect监听数据变化的问题

    写在前面 好久没更新Blog了,从CRUD Boy转型大数据开发,拉宽了不少的知识面,从今年年初开始筹备.组建.招兵买马,到现在稳定开搞中,期间踏过无数的火坑,也许除了这篇还很写上三四篇. 进入主题,通常企业为了实现数据统计.数据分析.数据挖掘.解决信息孤岛等全局数据的系统化运作管理 ,为BI.经营分析.决策支持系统等深度开发应用奠定基础,挖掘数据价值 ,企业会开始着手建立数据仓库,数据中台.而这些数据来源则来自于企业的各个业务系统的数据或爬取外部的数据,从业务系统数据到数据仓库的过程就是一个E

  • 浅谈Angular.js中使用$watch监听模型变化

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • 小程序使用watch监听数据变化的方法详解

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法.​​ 我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter,从而实现给对象赋值时(调用setter),执行watch对象中相对应的函数,达到监听效果. Object.definePr

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

随机推荐