JavaScript实现下拉复选框 记录

 

       记：团队数据组需要，临时紧急接到一个改造内部工具平台的项目，第一次接触然后直接上手开始优化 。。。前端是require.js + jquery.js 实现，然后就是很多坑

 

        实际上 jquery-ui 中就有实现，但是在新版本中，项目是个老项目，版本陈旧；鉴于最小改动快速优化的原则，很多现成的不能用。先按照 https://www.cnblogs.com/janes/p/5417387.html 的样例使用新增的插件比较合适减少现有项目的影响，实际验证发现各种不兼容，包括组件依赖顺序，ui版本和现有项目的兼容等。

      

        使用现成multiselect插件化 ，git地址 https://github.com/ehynds/jquery-ui-multiselect-widget

要注意：select标签的multiple属性要设置multiple，切记在ready方法里面初始化select下拉框。

 

  最关键的一步：刷新生效（其实在页面添加了一个button）

       $('#test').multiselect("refresh");

 

  最不能忘记的一步：初始化

        $("#test").multiselect({

    multiple: true,
    header: false,
    noneSelectedText: '请选择',
    selectedList:5,
    minWidth:200,//隐藏显示框的宽
height:160
});

否则报错：

cannot call methods on multiselect prior to initialization; attempted to call method 'refresh'

 

这个是插件的一部分，很多情况如此：例如瀑布流的一个插件

cannot call methods on masonry prior to initialization; attempted to call method 'appended'  

找到解决问题，需要在使用的时候，初始化一次，代码。

 

错误用法：

 

$('#itemshere').masonry( 'appended', $boxes );

 

正常用法

 

$('#itemshere')
  // initialize Masonry
  .masonry()
  // now okay to use methods
  .masonry( 'appended', $boxes );

        其实，http://www.jb51.net/article/55833.htm 这样的简单最好，需要美观自己在修饰即可，简单无依赖才是拿来就能用的的关键。（先记录下，后面有时间再自己实现一个依赖少的组件附上）