精华内容
下载资源
问答
  • layui下拉框动态赋值html代码:js代码:上图: html代码: <div class="layui-input-inline"> <select id="service" name="service" lay-verify="required" lay-filter="business" class="select"> ...

    layui下拉框动态赋值

    html代码:

    <div class="layui-input-inline">
             <select id="service" name="service" lay-verify="required"  class="select">
                    <option value="0" >请选择服务</option>
             </select>
    </div>
    

    js代码:

    layui.use('form',function(){
      var $ = layui.jquery
      var form = layui.form
    	    $.ajax({
    	        url: '/service/select',
    	        dataType: 'json',
    	        type: 'post',
    	        success: function(data) {
    	            if (data!== null) {
    	            	$("#service").empty();
                    	$("#service").append(new Option("请选择服务", "0"));
    	                $.each(data, function(index, item) {                   
    	                    $('#service').append(new Option(item));
    	                });
    	            } else {
    	                $("#service").append(new Option("暂无数据", ""));
    	            }
    	            //重新渲染
    	            form.render("select");
    	        }
    	    });
    });
    
    

    上图:

    数据库数据
    在这里插入图片描述
    前台样式
    在这里插入图片描述
    注:后台数据加到List里面返回。

    展开全文
  • layui 下拉框动态赋值

    千次阅读 2020-09-05 12:04:17
    核心代码部分为: 在select标签上面的class属性中加一公共类名称,...最后要重新渲染一下select标签,layui.form.render(‘select’); 否则可能还是会不展示下拉数据 <div class="layui-form-item"> <label

    本文主要解决的问题:
    有些下拉框的数据需要从远程获取,这是需要将远程获取的值动态的赋值到下拉框中。

    核心代码部分为:
    在select标签上面的class属性中加一公共类名称,newclassname
    界面加载完成时请求远程数据,将返回的数据渲染到多个option标签中
    获取到上面定义的 类名 对应的jquery对象,调用append方法,将多个option标签追加到select标签中
    最后要重新渲染一下select标签,layui.form.render(‘select’); 否则可能还是会不展示下拉数据

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="star">*</span>名称:</label>
        <div class="layui-input-inline">
            <select name="" lay-filter="eventName" id="" class="layui-input newclassname">
                <option value="" selected>名称</option>
            </select>
        </div>
        <br/>
    </div>
    $(function(){
            $.ajax({
                type: "",//get或者post
                url: '',
                data:{},//参数 接口传参 json对象
                success: function (res) {
                    if(res.data){
                        var optionHtml = '';
                        for(var i in res.data){
                            var value1 = res.data[i]['value1'];
                            var value2 = res.data[i]['value2'];
                            optionHtml += "<option value='" + value1 + "'>" + value2 + "</option>";
                        }
                        $('.newclassname').append(optionHtml);
                        layui.form.render('select');
                    }
                }
            });
    })
    
    展开全文
  • 如下所示: <!DOCTYPE html> <html> <head> <title>排课设置<...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">...link rel="stylesheet
  • 前台页面:前台js:layui.use([‘form‘, ‘upload‘, ‘layer‘], function () {var form = layui.form;//检查项目添加到下拉框中$.ajax({url: ‘../hwjg_App/hwjgApp_ashx/GetXm.ashx‘,dataType: ‘json‘,type: ...

    前台页面:

    前台js:

    layui.use([‘form‘, ‘upload‘, ‘layer‘], function () {

    var form = layui.form;

    //检查项目添加到下拉框中

    $.ajax({

    url: ‘../hwjg_App/hwjgApp_ashx/GetXm.ashx‘,

    dataType: ‘json‘,

    type: ‘get‘,

    success: function (data) {

    $.each(data, function (index, item) {

    $(‘#xm‘).append(new Option(item.xm, item.id));// 下拉菜单里添加元素

    });

    layui.form.render("select");

    //重新渲染 固定写法

    }

    })

    });

    })

    原文:https://www.cnblogs.com/yagamilight/p/9902093.html

    展开全文
  • LAYUI下拉框后台动态赋值

    千次阅读 2018-12-12 18:05:16
    //检查项目添加到下拉框中 $.ajax({ url: '../hwjg_App/hwjgApp_ashx/GetXm.ashx', dataType: 'json', type: 'get', success: function (data) { $.each(data, function (index, item) { $('#xm').append(new...

    来源:http://www.cnblogs.com/yagamilight/p/9902093.html

    前台页面:

    <select name="xm" id="xm" lay-verify="required" lay-filter="xmFilter">
    <option value=""></option>
    </select>

    前台js:

     <script>

    layui.use(['form', 'upload', 'layer'], function () {

     var form = layui.form;

        

    //检查项目添加到下拉框中
    $.ajax({
    url: '../hwjg_App/hwjgApp_ashx/GetXm.ashx',
    dataType: 'json',
    type: 'get',
    success: function (data) {
    $.each(data, function (index, item) {
    $('#xm').append(new Option(item.xm, item.id));// 下拉菜单里添加元素
    });
    layui.form.render("select");

    //重新渲染 固定写法
    }
    })

       });

     })

     </script>

    展开全文
  • layui下拉框动态赋值

    万次阅读 2020-02-01 13:42:00
    第一步:先把layui官方给的模板粘到自己的前端 注:下面的代码是我直接从layui官网粘过来的 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class=...
  • 动态赋值动态赋值后 多选效果没了 html <div class="layui-form-item"> <label class="layui-form-label">多选label> <div class="layui-input-block"> ...请选择option> <option value="1">1...
  • $.ajax({ type: 'get', url: 'https://localhost:44370/api/Department/GetList', success: function (msg) { for (var i = 0; i < msg.length; i++) { var str = ' <option value="'...
  • layui.use(['form', 'layedit', 'laydate'], function () { var $ = layui.jquery; $.ajax({ url: '../api/SysType/GetArticleType?parentId=1',//json文件位置 type: 'get', //请求方式为get dataType:...
  • div class="layui-inline"> <label class="layui-form-label">测试内容</label> <div class="layui-input-inline"> <select name="projectName" id="contentId" lay-filter=...
  • 今天小编就为大家分享一篇Layui 设置select下拉框自动选中某项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui下拉框赋值

    万次阅读 2017-11-08 18:45:39
    1、定义下拉框<div class="layui-input-block layui-form" lay-filter="selFilter"> 请选择 选项A</opt
  • var shiNameId=$('#... //选中要赋值的元素 shiNameId.add(new Option(bstCompanyAccount.workSiteCity),shiNameId.options[0]) //给第一个位置添加元素 shiNameId[0].selected = true; //第一级默认选中
  • //下拉框必须在class="layui-form"里不然监听事件没有作用选择项目:选择子级:$.ajax({url:"project/findByParentId",data:{},dataType:"json",success:function(resultData){$("#quiz").empty();if(resultData....
  • //获取页面加载时,默认的选中值 var select = 'dd[lay-value="' + $('#1ds').val() + '"]'; //模拟鼠标选中下拉项事件 $('#1ds').siblings("div.layui-form-select").find('dl').find(select).click();
  • //动态赋值需要刷新下拉框 layui.form.render('select'); //数据回显-重新加载完数据之后 //function(value)里面需要传入该字段的值 //将数据添加到下拉框里面 $("#giftMaterial").append(str); //数据回显 $("#...
  • layui下拉框赋值与设置监听事件

    千次阅读 2019-06-26 23:05:00
    下拉框赋值给value $("#selectxxx").val(‘1’); form.render(‘select’); 监听下拉选框选择事件,xxx-select-filter需在html中声明的lay-filter form.on(‘select(xxx-select-filter)’, function(data) ...
  • 今天小编就为大家分享一篇Layui带搜索的下拉框的使用以及动态数据绑定方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui动态赋值下拉框不显示

    千次阅读 2019-08-14 10:17:12
    var table=""; for ( var i = 0; i ; i++) { var select = ""; if(list[i].groupId == groupId ){ ... table+= ' [i].groupId+' selected='+select+'>'+list[i].... //动态赋值下拉框 需要使用这个方法才能显示
  • 拯救被layui渲染折磨已久的我,该方法无需重新渲染 HTML部分如下 <!--HTML部分--> <select id="treeType" name="treeType" class="layui-select" lay-filter="treeType"> <option value="4">...
  • 今天小编就为大家分享一篇layui下拉框、按钮状态、时间赋初始值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 3.JS 动态赋值 var tempIdStr = ''; $("#field").append(tempIdStr); $.each(dataObj.purchaseBatchModels, function (i, item) { var tempId = '<option value="' + item.pb_ID + '">' + item.pb_ID + '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 687
精华内容 274
关键字:

layui下拉框动态赋值