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 相关文章推荐
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
详解Vue源码中一些util函数
Apr 24 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
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
简单的JS多重继承示例
2008/03/13 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
javascript天然的迭代器
2010/10/29 Javascript
javascript数组去掉重复
2011/05/12 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python代码实现猜拳小游戏
2020/11/30 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
美容院营销方案
2014/03/05 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
政风行风整改方案
2014/10/25 职场文书
志愿者个人总结
2015/03/03 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
创业计划书之家教托管
2019/09/25 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
JavaScript流程控制(分支)
2021/12/06 Javascript
Django框架之路由用法
2022/06/10 Python