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动态方法调用与参数修改的问题
Dec 10 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP创建XML接口示例
2019/07/04 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
微信小程序实现留言板
2018/10/31 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
python实现ipsec开权限实例
2014/11/11 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
python协程用法实例分析
2015/06/04 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
学习python可以干什么
2019/02/26 Python
python binascii 进制转换实例
2019/06/12 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Django 限制访问频率的思路详解
2019/12/24 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
关键字throw与throws的用法差异
2016/11/22 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
Python3 类型标注支持操作
2021/06/02 Python