layui动态渲染生成select的option值方法


Posted in Javascript onSeptember 23, 2019

脚本语言:设定默认值;直接拼接,然后根据返回值渲染select

// 动态渲染脚本类型下拉框
      // 1.发送ajax请求得到data
      // 2.将data渲染到页面上
  function getDataList() {
    // 请求
    $.ajax({
      type:'post',
      url: "/cd/workPlatform/tool/detail",
      success:function(response){
        var data=response.data;
        $('#scriptLanguage').empty();
        var t;
        if(data==null){
          t='<option value="1" selected="selected">shell</option><option value="0" >damao</option><option value="2">bobo/option>'
        }else if(data.scriptLanguage=='1'){
          t='<option value="1" selected="selected">bobo</option><option value="0" >damao</option><option value="2">bobo/option>'

        }else if(data.scriptLanguage=='2'){
          t='<option value="1" selected="selected">xiaoyang</option><option value="0" >damao</option><option value="2">bobo</option>'

        };
        $('.scriptLanguage').append(t);
        form.render('select');
      }
    })
  }

  $(document).ready(function () {
    getDataList();
  });
//展示下拉框
  function showCategory(data, count) {
    $(data).each(function (i, n) {
     // console.log(n);
      var t = "";
      for (var j = 0; j < count; ++j) {
        t += "   ";
      }
      if (n.children.length > 0) {
        $("#toolType").append("<option value='" + n.id + "' style='font-weight: bold;'>" + t + n.categoryName + "</option>");
        showCategory(n.children, count + 1)
      } else {
        $("#toolType").append("<option value='" + n.id + "'>" + t + n.categoryName + "</option>");
      }
    });
    form.render('select');
  }
  $("#toolType").append("<option value=''>请选择脚本类型</option>");
  $.get("/cd/tool/category/tree.afca", {}, function (data) {
    showCategory(data.data, 0);
    form.render('select');
  }, "json");

以上这篇layui动态渲染生成select的option值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
node.js超时timeout详解
Nov 26 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
js实现日历的简单算法
Jan 24 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 #Javascript
layui-select动态选中值的例子
Sep 23 #Javascript
layui多图上传实现删除功能的例子
Sep 23 #Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 #Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 #Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 #Javascript
Node.js实现简单管理系统
Sep 23 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python连接PostgreSQL数据库的方法
2016/11/28 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python set常用操作函数集锦
2017/11/15 Python
python监控键盘输入实例代码
2018/02/09 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python 怎样进行内存管理
2020/11/10 Python
红领巾广播站广播稿
2014/02/01 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
研究生简历自我评
2015/03/11 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript