zoukankan      html  css  js  c++  java
  • layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在  class="layui-form" 里 不然监听事件没有作用
    <div class="layui-form" >
            <div class="layui-inline">
                <label class="layui-form-label">选择项目:</label>
                <div class="layui-input-inline">
                    <select name="quiz" id="quiz" lay-filter="projectfilter">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">选择子级:</label>
                <div class="layui-input-inline">
                    <select name="project" id="project"  >
                    </select>
                </div>
            </div>
            <button id="shuxinBtn" class="layui-btn" lay-submit="" lay-filter="seekClassRoom">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </div>
     $.ajax({
                    url : "project/findByParentId",
                    data : {},
                    dataType : "json",
                    success : function(resultData) {
                        $("#quiz").empty();
                        if(resultData.code == 0){
                            console.log(resultData.data);
                            $("#quiz").append(new Option("请选择项目", ""));
                            $.each(resultData.data, function(index, item) {
                                $('#quiz')
                                        .append(new Option(item.projectName, item.id));
                            });
                        }else{
                            $("#quiz").append(new Option("暂无数据", ""));
                        }
                        
                        layui.form.render("select");
                    }
                })
                
                //级联子项目
                //select 监听
                form.on('select(projectfilter)',function(data){
                    var value=data.value;  //select选中的值
                    console.log(value);
                    $.ajax({
                        url:"project/findParentId",
                        data:{parentId:value},
                        dataType:"json",
                        success:function(resultData){
                            if(resultData.code == 0){
                            //清空赋值
                                $("#project").empty();
                                console.log(resultData.data);
                                $("#project").append(new Option("请选择项目", ""));
                                $.each(resultData.data, function(index, item) {
                                //赋值
                                    $('#project')
                                            .append(new Option(item.projectName, item.id));
                                });
                            }else{
                                $("#project").append(new Option("暂无数据", ""));
                            }
                            layui.form.render("select");
                        }
                    })
                })
                layui.form.render("select");
            });
    
    
    两种方式赋值——————————————————————
    $("#getInfoName").find("option[value='"+data.PROJECT_ID+"']").prop("selected",true);
    form.render();  //必须要加
                        
    $("#getInfoName").prop("disabled",true);   //选中不可点击

    源文:https://blog.csdn.net/qq_35226176/article/details/84325814  layui select 下拉框 级联 动态赋值 与获取选中值

  • 相关阅读:
    Export excel的终级解决方案
    Power Designer 常见问题
    正反向数据库及生成设计报告
    寻求最佳开发模式,免得落得“精”尽人亡
    XmlNode与XmlElement的区别总结
    软件版本的定义:
    我发现博客园一个很严重的问题
    sql 行转列的终极写法
    js 自定义 $ 选择器
    可持续集成环境相关文章
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/11414224.html
Copyright © 2011-2022 走看看