layUI下拉树菜单回填

对做过的下拉回填做一下笔记:

静态数据点击回填:

          //点击下拉
          $(".downpanel").on("click", ".layui-select-title", function (e) {
              $(".layui-form-select").not($(this).parent(".layui-form-select")).removeClass("layui-form-selected");
              $(this).parent(".downpanel").toggleClass("layui-form-selected");
              layui.stope(e);
               }).on("click", "dl i", function (e) {
              layui.stope(e);
                 });

异步请求后点击回填:

          $.post('../functions/bpm/bpm.api.php',{action:'depcode'}, function (data){
            //填充点击结点  
            tree.render({ 
                  elem: "#deptree"
                  ,data: data
                  ,click: function (obj) {
                          var $select = $($(this)[0].elem).parents(".layui-form-select");
                          $select.find(".layui-select-title span").html(obj.data['title']).end().find("input:hidden[name='depcode']").val(obj.data['id']);
                  }
              });
              //只填充未级结点,不是未级不回填
              tree.render({ 
                  elem: "#s1"
                  ,data: data
                  ,click: function (obj) {
                      if(!obj.data.children){
                          var $select = $($(this)[0].elem).parents(".layui-form-select");
                          $select.find(".layui-select-title span").html(obj.data['title']).end().find("input:hidden[name='s1']").val(obj.data['id']);
                      }
                  }
              });
          },'json');

 

HTML代码

静态数据下拉

            <div class="layui-input-block">
                <select name="verifytype" lay-filter="verifytype" lay-verify="required">
                    <option value=""></option>
                    <option value="0">流程编码+姓名+部门</option>
                    <option value="1">流程编码+部门</option>
                    <option value="2">姓名+部门</option>
                    <option value="3">部门</option>

                </select>
            </div>

动态请求的下拉

                <div class="layui-unselect layui-form-select downpanel layui-input-block">
                    <div class="layui-select-title">
                        <span class="layui-input layui-unselect">请选择</span> <input type="hidden" name="depcode" value="0"> 
                            <i class="layui-edge"></i>
                    </div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd>
                            <ul id="deptree"></ul>
                        </dd>
                    </dl>
                </div>