deac
/
chosen
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add update / change documentation.

gh-pages
Patrick Filler 2011-07-21 11:41:48 -04:00
parent 19c67ec5e8
commit e5a32e27ca
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docsupport/style.css
View File

@ -37,8 +37,8 @@ h3 { font-weight: bold; }
ul li { list-style: disc; margin-left: 1em; margin-bottom: 1.25em; }
ol li { margin-left: 1.25em; }
ol ul { margin: .25em 0 0; }
ol ul li { margin: 0 0 .25em 1em; }
ol ul, ul ul { margin: .25em 0 0; }
ol ul li, ul ul li { list-style-type: circle; margin: 0 0 .25em 1em; }
li > p { margin-top: .25em; }

20
index.html
View File

@ -1186,6 +1186,26 @@
<code>&lt;select <strong>title="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
</div>
<h2>Change / Update Events</h2>
<div class="side-by-side clearfix">
<ul>
<li>
<h3>Form Field Change</h3>
<p>When working with form fields, you often want to perform some behavior after a value has been selected or deselected. Whenever a user selects a field in Chosen, it triggers a "change" event* on the original form field. That let's you do something like this:</p>
<p><code>$("#form_field").chosen().change( &hellip; );</code></p>
<p><strong>Note:</strong> Prototype doesn't offer support for triggering standard browser events. <a href="https://github.com/kangax/protolicious/blob/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js">Event.simulate</a> is required to trigger the change event when using the Prototype version.</p>
</li>
<li>
<h3>Updating Chosen Dynamically</h3>
<p>If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.</p>
<ul>
<li><strong>jQuery Version:</strong> <code>$("#form_field").trigger("liszt:updated");</code></li>
<li><strong>Prototype Version:</strong> <code>Event.fire($("form_field"), "liszt:updated");</code></li>
</ul>
</li>
</ul>
</div>
<h2>Why use Chosen?</h2>
<ul>
<li>