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 相关文章推荐
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
js数组的操作详解
Mar 27 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php数组查找函数总结
2014/11/18 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
jQuery入门知识简介
2010/03/04 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python生成器(Generator)详解
2015/04/13 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
django初始化数据库的实例
2018/05/27 Python
浅谈Python中的bs4基础
2018/10/21 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Django学习之文件上传与下载
2019/10/06 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
总经理的岗位职责
2014/02/23 职场文书
庆元旦演讲稿
2014/09/15 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python