博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery实现的layui多级选择框联动

Posted on 2022-07-05 23:07  Sxcan  阅读(1499)  评论(1编辑  收藏  举报

直接上代码,仅供交流学习,有不足之处欢迎指出。
给所有相关的select标签添加个class="selection"属性,以下是基于layui写的,获取elem的方法与平常写的jquery不大一样,思路差不多

form.on('select(selection)', function (obj) {
      var curr_sel_inx = $('.selection').index(obj.elem) // 获取当前select标签的index,$('.selection')获取所有select标签,是个数组,这里取得当前变化的select标签的index
      var next_selection = $('.selection').eq(curr_sel_inx + 1) //获取下一个select标签
      next_selection.find('option').not('option:first').remove() // 删除下一个select标签的子元素option
      // ajax请求数据,动态生成option
      common.ajax(
        "{% url 'clean:list_data_schedule' %}",
        'get',
        'json',
        {
          action: obj.elem.id,
          site_code: $('#site_code').val(),
          db_ip: $('#db_ip').val(),
          db_name: $('#db_name').val(),
          table_owner: $('#table_owner').val(),
          table_name: $('#table_name').val(),
          work_date: $('#work_date').val()
        },
        function (res) {
          if (res.code === 0) {
            var option = ''
            for (let index = 0; index < res.data.length; index++) {
              // 后端传来的res.key说明:后端传来的是字典,不同select标签传回的键不一样,所以后端传递key
              option += '<option value="' + res.data[index][res.key] + '">' + res.data[index][res.key] + '</option>'
            }
            next_selection.append(option) // 动态修改下一个select标签的option元素
            form.render('select') //layui form用法,修改select标签元素后,必须使用此方法重载
            return false
          }
          layer.alert(res.msg, { icon: 2, closeBtn: 0 }, function (index) {
            // 获取数据失败后,清空被修改select标签之后的所有select标签,避免保留原有值,
            $('.selection').each(function name(inx, elem) {
              if (inx > curr_sel_inx) {
                $('.selection').eq(inx).find('option').not('option:first').remove()
              }
            })
            form.render('select')
            layer.close(index)
          })
        }
      )
    })