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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
简单的js分页脚本
May 21 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue配置多页面的实现方法
May 22 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
vue获取验证码倒计时组件
Aug 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
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
ajax异步请求详解
2017/01/06 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 文件操作api(文件操作函数)
2016/08/28 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python基于百度云文字识别API
2018/12/13 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python pandas如何向excel添加数据
2020/05/22 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
一套SQL笔试题
2016/08/14 面试题
校长先进事迹材料
2014/02/01 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
法律专业求职信
2014/05/24 职场文书
北京申奥口号
2014/06/19 职场文书
2015年采购工作总结
2015/04/10 职场文书
七夕情人节问候语
2015/11/11 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server