layui动态渲染生成select的option值方法

 更新时间:2019年09月23日 16:53:55   作者:前端极客  
今天小编就为大家分享一篇layui动态渲染生成select的option值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

脚本语言:设定默认值;直接拼接,然后根据返回值渲染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 += "&nbsp;&nbsp;&nbsp";
      }
      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值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js实现简单扫雷

    js实现简单扫雷

    这篇文章主要为大家详细介绍了js实现简单扫雷,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js截取字符串功能的实现方法

    js截取字符串功能的实现方法

    这篇文章主要为大家详细介绍了js截取字符串功能的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • es6中new.target的作用和使用场景简单示例分析

    es6中new.target的作用和使用场景简单示例分析

    这篇文章主要介绍了es6中new.target的作用和使用场景,结合简单示例形式分析了es6中new.target的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • AutoJs实现刷宝短视频的思路详解

    AutoJs实现刷宝短视频的思路详解

    这篇文章主要介绍了AutoJs实现刷宝短视频的思路详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • javascript实现的平方米、亩、公顷单位换算小程序

    javascript实现的平方米、亩、公顷单位换算小程序

    这篇文章主要介绍了javascript实现的平方米、亩、公顷单位换算小程序,此代码通过URL传参的方式使用,也可以根据自己的需求做些改动,需要的朋友可以参考下
    2014-08-08
  • 在JavaScript中遭遇级联表达式陷阱

    在JavaScript中遭遇级联表达式陷阱

    在JavaScript中遭遇级联表达式陷阱...
    2007-03-03
  • javascript针对cookie的基本操作实例详解

    javascript针对cookie的基本操作实例详解

    这篇文章主要介绍了javascript针对cookie的基本操作,结合实例形式较为详细的分析了JavaScript操作cookie的基本技巧,并给出了一个JavaScript操作cookie的完整类,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • javascript bind绑定函数代码

    javascript bind绑定函数代码

    bind函数,顾名思义,用于为调用函数绑定一个作用域,因为this很容易跟丢它原来所在的作用域,直接指向顶层的window对象。
    2010-01-01
  • 前端强大的图片预览组件Viewer.js使用方法

    前端强大的图片预览组件Viewer.js使用方法

    这篇文章主要给大家介绍了关于前端强大的图片预览组件Viewer.js使用方法的相关资料,Viewer.js是一款强大的图片查看器,虽然简单且易上手,但是却并不影响其在图片查看方面的强大功能,同时这款优秀的插件配置操作起来也非常的方便,需要的朋友可以参考下
    2024-01-01
  • 利用javascript实现一些常用软件的下载导航

    利用javascript实现一些常用软件的下载导航

    利用javascript实现一些常用软件的下载导航,非常不错的应用,思路值得借鉴,没看过的朋友可以看下。
    2009-08-08

最新评论