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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
Element Dialog对话框的使用示例
Jul 26 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
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
javascript 写类方式之三
2009/07/05 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python实现最速下降法
2020/03/24 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
开办加工厂创业计划书
2014/01/03 职场文书
工作失职检讨书范文
2014/01/16 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS