JavaScript implements drop-down checkbox record

Note: The team data group needs to temporarily receive a project to transform the internal tool platform. It is the first contact and then directly starts to optimize. . . The front end is implemented by require.js + jquery.js, and then there are many pits

In fact, there is an implementation in jquery-ui, but in the new version, the project is an old project and the version is outdated; in view of the principle of quick optimization with minimal changes, many ready-made ones cannot be used. First, according to the example of https://www.cnblogs.com/janes/p/5417387.html, it is more appropriate to use the new plug-in to reduce the impact of existing projects. The actual verification found various incompatibilities, including component dependency order, ui Versions and compatibility with existing projects, etc.

Use ready-made multiselect plug-in, git address https://github.com/ehynds/jquery-ui-multiselect-widget

Note: the multiple attribute of the select tag should be set to multiple, remember to initialize the select drop-down box in the ready method.

The most critical step: Refresh takes effect (in fact, a button is added to the page)

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

The most unforgettable step: initialization

$("#test").multiselect({

    multiple : true ,
     header : false ,
     noneSelectedText : 'Please select' ,
     selectedList : 5 ,
     minWidth : 200 , //Hide the width of the display box
 height : 160
 });

Otherwise an error is reported:

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

This is part of the plugin, in many cases: for example a plugin for waterfall

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

To find a solution to the problem, you need to initialize the code once when you use it.

Incorrect usage:

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

normal usage

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

In fact, http://www.jb51.net/article/55833.htm is simple and best. You need to be beautiful and you can modify it yourself. Simple and independent is the key to being able to use it. (Record it first, and then implement a component with less dependencies later when you have time)

JavaScript implements drop-down checkbox record

Guess you like