select 二级联动之匹配效率的提升

最新推荐文章于 2023-03-15 11:42:35 发布

誉尚斌承

最新推荐文章于 2023-03-15 11:42:35 发布

阅读量451

点赞数

分类专栏： select联动文章标签： select 联动

本文链接：https://blog.csdn.net/yushangbincheng/article/details/75667162

版权

本文探讨了如何提高select二级联动的匹配效率。通过在页面初始化时预加载所有联动数据，尽管会增加内存占用，但在某些情况下可以显著改善网络条件下的用户体验。以公司和部门的联动选择为例，展示了预加载数据的实现方式。

摘要由CSDN通过智能技术生成

常用的select控件的联动是每触发一次选中事件就根据选中的key带到后台进行一次匹配查询，而如果我们在页面初始化时就将所有要联动的数据取出保存下来（

虽然可能在内存上占了一些比重，但是有时针对网络状况可以作权衡），有时情况也会好很多。举例如下：

背景：现有若干家公司，每个公司下有若干部门小组，要求是选择公司更换时，二级select控件做出联动匹配变化。实现如下：
首先，html:

 <div class="col-xs-4">
      <label class="margin-l-20 control-label label-title form-lable-required" for="User_Company">所属公司</label>
      <input type="hidden" id="hid_CompanyId" />
      <select class="form-control margin-l-10" id="User_Company" name="User_Company" data-size="10" data-msg="所属公司" οnchange="GetGroupByCompany()" style="width:59%;"></select>
 </div>
 <div class="col-xs-4">
      <label class="margin-l-20 control-label