RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-30 00:26:03 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #177 from inmarelibero/gh-pages

Browse Source 
added "add reference to original option element" in doc
This commit is contained in:
Igor Vaynberg 2012-06-29 19:45:57 -07:00
commit f4ddeee6b2
1 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -25,6 +25,7 @@ version: 2.1
<script id="script_e4"> <script id="script_e4">
$(document).ready(function() { $(document).ready(function() {
function format(state) { function format(state) {
// original <option> or <optgroup> element is accessible by property state.element
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text; return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
} }
$("#e4").select2({ $("#e4").select2({
@ -340,6 +341,22 @@ version: 2.1
<div class="span8"> <div class="span8">
<h3>Example Code</h3> <h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e4"></pre> <pre class="prettyprint linenums" id="code_e4"></pre>
<p>
You can set <code>data-</code> attributes to <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) and use them inside temptlating functions:
</p>
<pre class="prettyprint linenums">
&lt;select&gt;
&lt;option value="0" data-foo="bar"&gt;option one&lt;/option&gt;
...
&lt;/select&gt;
</pre>
<pre class="prettyprint linenums">
function format(state) {
var originalOption = state.element;
return "&lt;img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' /&gt;" + state.text;
}
</pre>
</div> </div>
</article> </article>
@ -773,6 +790,14 @@ version: 2.1
<tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the selection</td></tr> <tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the selection</td></tr>
</table> </table>
The default implementation expects the object to have a <code>text</code> property that is returned. The default implementation expects the object to have a <code>text</code> property that is returned.
<br><br>
Original <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) element is accessible inside the specified function through the property <code>item.element</code>:
<pre>
format(item) {
var originalOption = item.element;
// return item.text
}
</pre>
</td></tr> </td></tr>
<tr><td>formatResult</td><td>function</td><td> <tr><td>formatResult</td><td>function</td><td>
Function used to render a result that the user can select. Function used to render a result that the user can select.
@ -783,6 +808,14 @@ version: 2.1
<tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the result</td></tr> <tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the result</td></tr>
</table> </table>
The default implementation expects the object to have a <code>text</code> property that is returned. The default implementation expects the object to have a <code>text</code> property that is returned.
<br><br>
Original <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) element is accessible inside the specified function through the property <code>item.element</code>:
<pre>
format(item) {
var originalOption = item.element;
// return item.text
}
</pre>
</td></tr> </td></tr>
<tr><td>formatNoMatches</td><td>function</td><td> <tr><td>formatNoMatches</td><td>function</td><td>
Function used to render the &quot;No matches&quot; message Function used to render the &quot;No matches&quot; message