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 关于# 和 void的区别分析
Oct 26 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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三种方式实现链式操作详解
2017/01/21 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
大学生简历求职信
2014/06/24 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
护士辞职信怎么写
2015/02/27 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书