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 相关文章推荐
封装的原生javascript弹出层代码
Sep 24 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
js实现随机数小游戏
Jun 28 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
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
社会实践感言
2014/01/25 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
表扬通报怎么写
2015/01/16 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
大学新生入学感想
2015/08/07 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
postgresql中如何执行sql文件
2023/05/08 PostgreSQL