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 获取iframe里页面中元素值的方法
Feb 17 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
微信小程序全局变量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 foreach循环使用详解与实例代码
2010/05/08 PHP
mac下安装nginx和php
2013/11/04 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
今日说法观后感
2015/06/08 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS