Jquerychosen is a selection plug-in that supports search and multiple selections, but does not support input results. I would like to share with you the following examples. For more information, see, hope to help you Jquery chosen address: https://github.com/harvesthq/chosen
A selection plug-in that supports search and multiple selections, but does not support input results such
Are you sure you want to use this? Otherwise, it makes no sense to look down.
The following problems may suddenly occur if they are used in provinces and cities:
1. The value cannot be set dynamically.
2. Cannot dynamically set the selected
After reading the API several times, the method provided by Mi youfa can be called directly. There is no way to look at the source code and find that there is a judgment during its initialization, such:
Check whether there is a destroy ("# city). chosen (" destroy. I tried it. Previously, I debugged its generated dom to directly remove the generated dom. The result is not feasible and can be removed, but it can no longer be initialized. A waste of two or three hours.
First, solve the first problem
The Code is as follows:
$ ("# Province"). change (function (){
$ ("# City" 2.16.html ("");
$ ("# City"). chosen ("destroy ");
$ ("-All-"). AppendTo (" # city ");
$. GetJSON ("$ {ctx}/api/getCityByProvinceJson. jsp ",{
Province: $ ("# province"). val ()
}, Function (data ){
$. Each (data, function (I ){
$ (""+ Data [I]. city +""). AppendTo (" # city ");
});
$ ("# City"). attr ("multiple", true );
$ ("# City"). chosen ({
No_results_text: "This option is not found! ",
Width: "70%"
});
});
});
$ ("# City"). chosen ({
No_results_text: "This option is not found! ",
Width: "70%"
});
In this way, you can set the value dynamically. The code is a bit repetitive, but no good method is found yet.
The second problem is solved below
The usage is similar to the above. First set the select value and then use the initialization drop-down box. The Code is as follows:
The Code is as follows:
$ ("# City"). val ("Shanghai ");
$ ("# City"). chosen ({
No_results_text: "This option is not found! ",
Width: "70%"
});
In this way, you can dynamically set the selected