_php instance of the Fuzzy Query association select box in PHP

This article mainly introduces the fuzzy query in PHP and associated with three select boxes, the need for friends can refer to the following

1. In PHP we often use the dropdown box, and related to each other, if the drop-down box has a lot of option, then we need to use the fuzzy search function, then how to do?

In this function, take a detour, it is best not to associate the ID value of two select after the Select property is selected, can not be modified. Remove the attribute when selecting again, so there is a problem with Firefox and Google JS compatibility when removing the Select attribute. It is very easy to show the situation that does not correspond or the attribute cannot be removed, and the function is troublesome. In addition, in the background must judge the correspondence between the two. (in the background than the corresponding relationship between the time, to go to the database query, find the Enterprise ID, go to the database to check the security company's ID match.) Do not use the front desk to pick up the ID value of the guarantee company).

2. Style:

Related, if there is a guarantee the company drop-down box only shows a guarantee company, others do not show, if not, show all, let the administrator choose.

3. We know that the Select dropdown box is not allowed to have a search box, nor can write a input search box in, so we can only use the plug-in to achieve, the Select box into the UL Li, very useful plug-in: Select2.

4. Normal in the background database to obtain data, assign value, and introduce Select2 plug-in. Note, and Select2 plug-in related to the CSS file also to introduce, and some CSS ask Price and JS for the package, the style of their own change.

5. Style added:

. select2-resultsoption[aria-selected] {
Cursor:pointer;
font-size:14px;
}
. Select2-container--default. Select2-selection--single. select2-selectionrendered {
Color: #444;
line-height:28px;
font-size:14px;
}
. select2-container--default. select2-results >. select2-resultsoptions {
max-height:280px;
Overflow-y: auto;
}

6. The correlation between the drop-down boxes:

7.

8. JS Processing: Get the hidden Select value, re-assemble Select option (Note: When Select is hidden, his value still exists and is available)