Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added "setSelection" method to code, tests, and documentation. #727

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added "setSelection" method to code, tests, and documentation. #727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ebd154d
Added "setSelection" method to code, tests, and documentation.
Apr 18, 2016
2fed40d
Revert "Added "setSelection" method to code, tests, and documentation."
Apr 18, 2016
e687bf7
Added "setSelection" method to code, tests, and documentation.
Apr 18, 2016
ded64b3
Merge remote-tracking branch 'refs/remotes/davidstutz/master'
Apr 18, 2016
c0f7bce
Merge branch 'master' of https://github.com/davidstutz/bootstrap-mult…
Apr 25, 2016
bf5dce6
Merge remote-tracking branch 'refs/remotes/davidstutz/master'
Apr 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions dist/js/bootstrap-multiselect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1378,6 +1378,58 @@
}
},

/**
* Set the current selection
*
* Helper function to set which options are currently selected by invoking
* 'select' for all unselected values that appear in the given list and
* invoking 'deselect' for all selected values that do NOT appear in the
* given list
*
* @param {Array} selection
* @param {Boolean} triggerOnChange
*/
setSelected: function (selection, triggerOnChange) {
if (!$.isArray(selection)) {
selection = [selection];
}

// Get all of the enabled options
var opts = $("option:enabled", this.$select);
var selectedOpts = opts.filter(":selected");
var notSelectedOpts = opts.not(":selected");
var values;
var val;

// Find all the not-selected options
values = notSelectedOpts.map(function () {
// If their value is in the array, it should be selected so
// return that value (otherwise, return null to omit it from the result)
val = $(this).val();
return ($.inArray(val, selection) > -1) ? val : null;
}).get();

if ( values.length )
{
// Select all that need to be selected
this.select(values, triggerOnChange);
}

// Find all the selected options
values = selectedOpts.map(function () {
// If their value is NOT in the array, it should be deselected so
// return that value (otherwise, return null to omit it from the result)
val = $(this).val();
return ($.inArray(val, selection) == -1) ? val : null;
}).get();

if ( values.length )
{
// Deselect all that should not be selected
this.deselect(values, triggerOnChange);
}
},

/**
* Rebuild the plugin.
*
Expand Down
154 changes: 154 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3750,6 +3750,160 @@ <h2 id="methods">Methods</h2>
});
});
&lt;/script&gt;
</pre>
</div>
</td>
</tr>
<tr>
<td>
<code>.multiselect('setSelected', selection)</code>
</td>
<td>
<p>
Explicitly sets which options are selected (also works with an array of values). Any currently selected options
that do not appear in the given array will be deselected. Any deselected options that do appear in the given array
will be selected.
</p>

<div class="example">
<div class="btn-group">
<script type="text/javascript">
$(document).ready(function() {
$('#example-setSelected').multiselect();

$('#example-setSelected-button').on('click', function() {
$('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);

alert('Selected 1, 2 and 4. Deselected 3, 5, and 6.');
});
});
</script>
<div class="btn-group">
<select id="example-setSelected" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5" selected="selected">Option 5</option>
<option value="6" selected="selected">Option 6</option>
</select>
<button id="example-setSelected-button" class="btn btn-default">Set the Selection...</button>
</div>
</div>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-setSelected').multiselect();

$('#example-setSelected-button').on('click', function() {
$('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);

alert('Selected 1, 2 and 4. Deselected 3, 5, and 6.');
});
});
&lt;/script&gt;
</pre>
</div>

<p>
The method provides an additional parameter: <code>.multiselect('setSelected', selection, triggerOnChange)</code>. If the third parameter is set to true, the method will manually trigger the <code>onChange</code> option.
</p>

<div class="example">
<div class="btn-group">
<script type="text/javascript">
$(document).ready(function() {
$('#example-setSelected-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
}
});

$('#example-setSelected-onChange-button').on('click', function() {
$('#example-setSelected-onChange').multiselect('setSelected', '1', true);
});
});
</script>
<div class="btn-group">
<select id="example-setSelected-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">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>
<button id="example-setSelected-onChange-button" class="btn btn-default">Set Selected</button>
</div>
</div>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-setSelected-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
}
});

$('#example-setSelected-onChange-button').on('click', function() {
$('#example-setSelected-onChange').multiselect('setSelected', '1', true);
});
});
&lt;/script&gt;
</pre>
</div>

<p>
The above parameter also works when multiple options change (selected or deselected). Note that <code>onChange</code> is called for each selected and deselected option individually.
</p>

<div class="example">
<div class="btn-group">
<script type="text/javascript">
$(document).ready(function() {
$('#example-setSelected-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
}
});

$('#example-setSelected-onChange-array-button').on('click', function() {
$('#example-setSelected-onChange-array').multiselect('setSelected', ['2', '4'], true);
});
});
</script>
<div class="btn-group">
<select id="example-setSelected-onChange-array" multiple="multiple">
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-setSelected-onChange-array-button" class="btn btn-default">Change Multiple Selections</button>
</div>
</div>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-setSelected-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
}
});

$('#example-setSelected-onChange-array-button').on('click', function() {
$('#example-setSelected-onChange-array').multiselect('setSelected', ['2','4'], true);
});
});
&lt;/script&gt;
</pre>
</div>
</td>
Expand Down
Loading