layui中的formselects几种下拉

第一种,普通的下拉搜索联动

 <div class="mdui-col-xs-12 mdui-col-sm-4 mdui-col-md-3 mdui-col-lg-2" data-field="business_company">
        <div class="search-form-item">
          <label class="search-form-label">业务公司</label>
          <div id="business_company" class="search-form-input">
            <select name="business_company" lay-filter="business_company" class="layui-input">
              <option value="" {if $Think.get.business_company ==""} selected {/if}>全部</option>
              {if !empty($business_company)}
              {foreach $business_company as $k=>$v}
              <option value="{$k}" {if $Think.get.business_company == $k} selected {/if}>{$v}</option>
              {/foreach}
              {/if}
            </select>
          </div>
        </div>
      </div>
//业务公司联动业务员
    form.on('select',(data)=>{
      if ($(data.othis).parent().prop("id") == 'business_company') {
        //console.log();
        let html_one='<option value="">全部</option>';
        let html_two='<option value="">全部</option>';
          $.post('{:url("$classuri/business_company_chang")}',{dept_id:data.value},(res)=>{
                for (const key in res) {
                  // console.log(key);
                  if ($.inArray(res[key].is_disabled, is_dis_all)){
                      html_one += '<option value="'+ res[key].emp_id +'">'+ res[key].emp_name + '</option>'
                  }else{
                      html_two += '<option value="'+ res[key].emp_id +'">'+ res[key].emp_name + '</option>'
                  }
                }
                //console.log(res);
                // console.log(html);
                $('[name="emp_id_one"]').html(html_one);
                $('[name="emp_id_two"]').html(html_two);
                form.render();
            })   
      }
      
    })
   第二种,多选的下拉搜索联动
  <div class="mdui-col-xs-12 mdui-col-sm-6 mdui-col-md-4 mdui-col-lg-2">
        <div class="search-form-item">
          <label class="search-form-label">业务公司</label>
          <div class="search-form-input">
            <select name="company_id" lay-filter="company_id" xm-select-skin="default" xm-select="company_id" xm-select-height="36px" xm-select-search>
              {if !empty($getCompanyArr)}
              {foreach $getCompanyArr as $k=>$v}
              <option value="{$v.company_id}" {if $Think.get.company_id == $v.company_id} selected {/if}>{$v.company_name_cn}</option>
              {/foreach}
              {/if}
            </select>
          </div>
        </div>
      </div>
 var api_url='{:url("$classuri/getBusinessGroupByCompany")}'
//业务公司联动业务组
    layui.formSelects.on('company_id', function(id, vals, val, isAdd, isDisabled){
      console.log('33333333',id, vals, val, isAdd, isDisabled);
      if(isAdd) { // 增加
            vals.push(val)
            str_dept = ''
            vals.forEach(item => { str_dept = str_dept + ',' + item.value})
            str_dept =  str_dept.replace(',', '')
            console.log(str_dept,str_dept.split(','),'str_dept.split(',')str_dept.split(',')增加');
            let html_one='';
            formSelects.data('dept_id', 'server', {
            url:api_url,
            type: 'POST',
            data:{
            CompanyId: str_dept
           },
          });
          } else { // 减少
            if(vals.length == 1) { // 减少后就没有了 1个减了没有了
            console.log(77777);
            formSelects.data('dept_id', 'server', {
            url:api_url,
            type: 'POST',
            data:{
            CompanyId: ''
           },
            });
            formSelects.data('emp_id_one', 'server', {
            url:api_url_emp,
            type: 'POST',
            data:{
            GroupId: ''
           },
            });
            formSelects.data('emp_id_two', 'server', {
            url:api_url_unemp,
            type: 'POST',
            data:{
            GroupId: ''
           },
            });
            } else { //  1个减了还有
              str_dept = ''
              let new_arr = vals.filter(item => {
                return item.value != val.value
              })
              new_arr.forEach(item => { str_dept = str_dept + ',' + item.value})
              str_dept = str_dept.replace(',', '')
              console.log(str_dept,str_dept.split(','),'str_dept.split(',')str_dept.split(',')减少');
              let html_one='';
              formSelects.data('dept_id', 'server', {
              url:api_url,
              type: 'POST',
              data:{
              CompanyId: str_dept
            },
            });
            }
          }
      });
      再搜索的时候实现下拉回显
      var dept_id='{$Think.get.dept_id|default=""}';
       var arr = dept_id.split(',');
       ormSelects.data('dept_id', 'server', {
        url: api_url,
        type: 'POST',
        data: {
        CompanyId: company_id,
        },
        success: function(data) {
        if (!selectedDept) {
            formSelects.value('dept_id', arr); // Set selected values
            selectedDept = true; // Set the flag to avoid repetitive rendering
        }
        },
    });
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值