At first I thought it was very simple, just add an input checkbox to the option. Unexpectedly, it doesn't work. I searched for some implementation methods on the Internet, mainly using div layers to simulate drop-down. I wanted to follow this idea and write one myself based on the specific application of this project, but found that it was too troublesome. I just happened to be using extjs in another project, and found an extension lovcombo, and studied its own examples (with version 2.3 of extjs, version 3.x seems to have problems). The example is not difficult, the key is to add it to the existing code and change the original code as little as possible.
During the use of drop-down multi-select boxes, a lot of logic is mainly focused on the configuration of the data source store and the processing of select events. The data and UI separation model of extjs itself makes the implementation of cascade very easy. Just update the store of the city drop-down box in the select event of the province drop-down box. A small thing to note is that when an option is selected, the value of checkField needs to be used to determine whether the option is selected or canceled. There are also options for selecting all, deselecting all (the two lovcombos have their own methods selectAll and deselectAll) and the number of selected options (you need to traverse the store and detect the checkField value of each item).