Chosen.jquery.js

http://baifjece.blog.163.com/blog/static/33794654201286102519119/

------------------first load Sets the default check---------

Option setting selected for the Select label

chosen-powerful jquery analog selection box plugin

2012-09-06 10:25:19|  Category: JQuery | Tags:chosen jquery simulation Selection | Report | Font size Subscription

It's been a long time since I wrote jquery-related stuff. Today, Ming River recommends a pretty good analog selection box plugin: Chosen. Chosen provides suggest features, powerful is the implementation of the option group and multi-select keyword processing.

• Click here to view demo
• Click here to download

How to use? Introduction of jquery Libraries and scripts

1. <script src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type= "Text/javascript" >< /script>
2. <script src= "Chosen/chosen.jquery.js" type= "Text/javascript" ></script>

Select box HTML fragment

2. <select class= "Chzn-select" data-placeholder= "Choose a Country" style= "width:350px;" tabindex= "1" >
4. <option value= "" ></option>
6. <option value= "states" >united states</option>
8. <option value= "Kingdom" >united kingdom</option>
10. <option value= "Afghanistan" >Afghanistan</option>
12. <option value= "Albania" >Albania</option>
14. ...
16. </select>

Initializing components

1. $ (". Chzn-select"). Chosen ();

It's so simple.

Chosen tips for use

How do I set the default text for a mock selection box?
Set Data-placeholder= "" and you can.
If Data-placeholder is not present, the component automatically sets the default text to "select Some Option" or "Select Some Options".
How do I set the text that appears when I don't have search results?

1. $ (". Chzn-select"). Chosen ({no_results_text: "No matching Result"});

How do I group options?
Add Optgroup tags to html.

2. <select data-placeholder= "Your favorite Football Teams" style= "width:350px;" class= "Chzn-select" multiple tabindex= "6" >
4. <option value= "" ></option>
6. <optgroup label= "NFC EAST" >
10. <option>dallas cowboys</option>
12. <option>new York giants</option>
14. <option>philadelphia eagles</option>
16. <option>washington redskins</option>
18. <optgroup>
20. <optgroup label= "NFC North" >
22. <option>chicago bears</option>
26. <option>detroit lions</option>
28. <option>green Bay packers</option>
30. <option>minnesota vikings</option>
32. </optgroup>
34. </select>

How do I turn on multi-select support?
Add a multi-select attribute multiple
<select data-placeholder= "Choose a Country" class= "chzn-select" multiple style= "width:350px;" tabindex= "4" >

1. <option value= "" ></option>
2. <option value= "states" >united states</option>
3. <option value= "Kingdom" >united kingdom</option>
4. <option value= "Afghanistan" >Afghanistan</option>
5. <option value= "Albania" >Albania</option>
6. <option value= "Algeria" >Algeria</option>
7. </select>
   
   

Source: http://www.36ria.com/4976

Chosen.jquery.js