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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JavaScript实现单英文金山打字通
Jul 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
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php获取远程文件大小
2015/10/20 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
javascript history对象详解
2017/02/09 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python访问sqlserver示例
2014/02/10 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Django 前后台的数据传递的方法
2017/08/08 Python
python版简单工厂模式
2017/10/16 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
四年大学自我鉴定
2014/02/17 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python