Group single and multiple select box examples under "The basics".
This commit is contained in:
parent
ea70cbc24c
commit
20b64cfe15
@ -1,6 +1,8 @@
|
|||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h1 id="basic">The basics</h1>
|
<h1 id="basics" class="page-header">The basics</h1>
|
||||||
|
|
||||||
|
<h2 id="single">Single select boxes</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Select2 can take a regular select box like this...
|
Select2 can take a regular select box like this...
|
||||||
@ -32,6 +34,32 @@ $(document).ready(function() {
|
|||||||
...
|
...
|
||||||
<option value="WY">Wyoming</option>
|
<option value="WY">Wyoming</option>
|
||||||
</select>
|
</select>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h2 id="multiple">Multiple select boxes</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="s2-example">
|
||||||
|
<p>
|
||||||
|
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre data-fill-from=".js-code-multiple"></pre>
|
||||||
|
|
||||||
|
<script type="text/x-example-code" class="js-code-multiple">
|
||||||
|
$(".js-example-basic-multiple").select2();
|
||||||
|
|
||||||
|
<select class="js-example-basic-multiple" multiple="multiple">
|
||||||
|
<option value="AL">Alabama</option>
|
||||||
|
...
|
||||||
|
<option value="WY">Wyoming</option>
|
||||||
|
</select>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
@ -1,27 +0,0 @@
|
|||||||
<section>
|
|
||||||
|
|
||||||
<h1 id="multiple">Multiple select boxes</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="s2-example">
|
|
||||||
<p>
|
|
||||||
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<pre data-fill-from=".js-code-multiple"></pre>
|
|
||||||
|
|
||||||
<script type="text/x-example-code" class="js-code-multiple">
|
|
||||||
$(".js-example-basic-multiple").select2();
|
|
||||||
|
|
||||||
<select class="js-example-basic-multiple" multiple="multiple">
|
|
||||||
<option value="AL">Alabama</option>
|
|
||||||
...
|
|
||||||
<option value="WY">Wyoming</option>
|
|
||||||
</select>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</section>
|
|
@ -1,10 +1,15 @@
|
|||||||
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
|
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
|
||||||
<ul class="nav s2-docs-sidenav">
|
<ul class="nav s2-docs-sidenav">
|
||||||
<li>
|
<li>
|
||||||
<a href="#basic">The basics</a>
|
<a href="#basics">The basics</a>
|
||||||
</li>
|
<ul class="nav">
|
||||||
<li>
|
<li>
|
||||||
<a href="#multiple">Multiple select boxes</a>
|
<a href="#single">Single select boxes</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#multiple">Multiple select boxes</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#placeholders">Placeholders</a>
|
<a href="#placeholders">Placeholders</a>
|
||||||
|
@ -27,7 +27,6 @@ slug: examples
|
|||||||
<div class="col-md-9" role="main">
|
<div class="col-md-9" role="main">
|
||||||
|
|
||||||
{% include examples/basics.html %}
|
{% include examples/basics.html %}
|
||||||
{% include examples/multiple.html %}
|
|
||||||
{% include examples/placeholders.html %}
|
{% include examples/placeholders.html %}
|
||||||
{% include examples/data.html %}
|
{% include examples/data.html %}
|
||||||
{% include examples/disabled-mode.html %}
|
{% include examples/disabled-mode.html %}
|
||||||
|
Loading…
Reference in New Issue
Block a user