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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
Vue计算属性的使用
2017/08/04 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
JS实现公告上线滚动效果
2021/01/10 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python二分查找详解
2015/09/13 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python os库常用操作代码汇总
2020/11/03 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
商务助理求职信范文
2014/04/20 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python