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列表框listbox全选和反选的实现方法
Mar 18 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
简单实现js浮动框
Dec 13 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
layui实现数据表格自定义数据项
2019/10/26 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python中str.join()简单用法示例
2018/03/20 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python 列表降维的实例讲解
2018/06/28 Python
python 自动去除空行的实例
2018/07/24 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
非功能性需求都包括哪些方面
2013/10/29 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
计算机开发个人求职信范文
2013/09/26 职场文书
毕业生精彩的自我评价分享
2013/10/06 职场文书
百年校庆节目主持词
2014/03/27 职场文书
机动车登记业务委托书
2014/10/08 职场文书
小学工作总结2015
2015/05/04 职场文书
外出听课学习心得体会
2016/01/15 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL