Skip to content

B
bootstrap-multiselect
Commit 8d246fff authored by David Stutz's avatar David Stutz
Browse files
Options

#378, #376: example for PHP usage. Updated bower.

parent 0bbd01c7
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 11 deletions
bower.json
View file @ 8d246fff
{
"name": "bootstrap-multiselect",
"description": "Twitter Bootstrap plugin to make selects user friendly.",
"homepage": "http://davidstutz.github.io/bootstrap-multiselect/",
"version": "0.9.9",
"keywords": [
"js",
"css",
"less",
"bootstrap",
"jquery",
"multiselect"
],
"main": [
"./js/bootstrap-multiselect.js",
"./css/bootstrap-multiselect.css"
"./dist/js/bootstrap-multiselect.js",
"./dist/css/bootstrap-multiselect.css",
"./dist/less/bootstrap-multiselect.less"
],
"dependencies": {
"jquery": ">= 1.11.0",
"bootstrap": ">= 2.3.2"
},
"ignore": [
"js/bootstrap-3*",
"js/jquery*",
"js/prettify*",
"css/bootstrap-3*",
"css/prettify*",
"docs/.*",
"tests/.*",
"*.html",
"*.git*",
"fonts"
"*.md",
"*.png",
"*.php"
]
}
dist/js/bootstrap-multiselect.js
View file @ 8d246fff
......@@ -242,6 +242,7 @@
includeSelectAllIfMoreThan: 0,
selectAllText: ' Select all',
selectAllValue: 'multiselect-all',
selectAllName: false,
enableFiltering: false,
enableCaseInsensitiveFiltering: false,
enableClickableOptGroups: false,
......@@ -669,8 +670,8 @@
var $li = $(this.options.templates.li);
$('label', $li).addClass("checkbox");
if (this.options.checkboxName) {
$('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />');
if (this.options.selectAllName) {
$('label', $li).append('<input type="checkbox" name="' + this.options.selectAllName + '" />');
}
else {
$('label', $li).append('<input type="checkbox" />');
......
index.html
View file @ 8d246fff
......@@ -34,6 +34,7 @@
<li><a href="#templates">Templates</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#further-examples">Further Examples</a></li>
<li><a href="#post">Server-Side Processing</a></li>
<li><a href="#keyboard-support">Keyboard Support</a>
<li><a href="#faq">Frequently Asked Questions</a></li>
<li><a href="#license">License</a></li>
......@@ -513,7 +514,7 @@
<td><code>checkboxName</code></td>
<td>
<p>
The name used for the generated checkboxes. For more information on how to use the plugin as part of a form validated and used using server side scripting, as for example PHP, see <a href="#post">Bootstrap Multiselect and POST</a>. Related issues are discussed in the FAQ, in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/323">#323</a>, in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/331">331</a> and in <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/336">336</a>.
The name used for the generated checkboxes. See <a href="#post">Server-Side Processing</a> for details.
</p>
<div class="example">
......@@ -1420,6 +1421,47 @@
});
});
&lt;/script&gt;
</pre>
</div>
</td>
</tr>
<tr>
<td>
<code>selectAllName</code>
</td>
<td>
<p>
This option allows to control the name given to the select all option. See <a href="#post">Server-Side Processing</a> for more details.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllName').multiselect({
includeSelectAllOption: true,
selectAllName: 'select-all-name'
});
});
</script>
<select id="example-selectAllName" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-selectAllName').multiselect({
includeSelectAllOption: true,
selectAllName: 'select-all-name'
});
});
&lt;/script&gt;
</pre>
</div>
</td>
......@@ -3200,6 +3242,139 @@
</pre>
</div>
<div class="page-header">
<h2 id="post">Server-Side Processing</h2>
</div>
<p class="alert alert-warning">
The below example uses a PHP script to demonstrate Server-Side Processing. Therefore, the below example will not run online - <b>download the repository and try it on a local server</b>.
</p>
<p>
In order to receive the correct data after submitting the form, the used <code>select</code> has to have an appropriate name. Note that an <code>[]</code> needs to be appended to the name when using the <code>multiple</code> option/attribute. Per default, the checkboxes used within the multiselect will not be submitted, however, this can be changed by adapting <code>checkboxName</code>. The select all option as well as the text input used for the filter will not be submitted. As this may be useful, the name of the select all checkbox may be adapted using the <code>selectAllName</code> option. The value of the select all checkbox can be controlled by the <code>selectAllValue</code> option while the values of the remaining checkboxes correspond to the values used by the <code>option</code>'s of the original <code>select</code>.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-post').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
});
</script>
<form class="form-horizontal" method="POST" action="post.php">
<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<select id="example-post" name="multiselect[]" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Text Input</label>
<div class="col-sm-10">
<input type="text" name="text" class="form-control" placeholder="Text Input" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label>
<input type="radio" name="radio"> Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio"> Radio 2
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-post').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
});
&lt;/script&gt;
&lt;form class=&quot;form-horizontal&quot; method=&quot;POST&quot; action=&quot;post.php&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label class=&quot;col-sm-2 control-label&quot;&gt;Multiselect&lt;/label&gt;
&lt;div class=&quot;col-sm-10&quot;&gt;
&lt;select id=&quot;example-post&quot; name=&quot;multiselect[]&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
&lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
&lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
&lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label class=&quot;col-sm-2 control-label&quot;&gt;Text Input&lt;/label&gt;
&lt;div class=&quot;col-sm-10&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Text Input&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
&lt;div class=&quot;checkbox&quot;&gt;
&lt;label&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot;&gt; Checkbox
&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
&lt;div class=&quot;radio&quot;&gt;
&lt;label&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt; Radio 1
&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
&lt;label&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt; Radio 2
&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Submit&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
</div>
<div class="page-header">
<h2 id="keyboard-support">Keyboard Support</h2>
</div>
......
post.php 0 → 100644
View file @ 8d246fff
<?php
print_r($_POST);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment