Skip to content

Commit

Permalink
#528: onChange is triggered for each (de)selected option separately.
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidstutz
davidstutz committed May 25, 2015
1 parent ce82d20 commit 0d50ee7
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 10 deletions.
16 changes: 8 additions & 8 deletions dist/js/bootstrap-multiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1014,14 +1014,14 @@

$checkbox.prop('checked', true);
$option.prop('selected', true);

if (triggerOnChange) {
this.options.onChange($option, true);
}
}

this.updateButtonText();
this.updateSelectAll();

if (triggerOnChange && selectValues.length === 1) {
this.options.onChange($option, true);
}
},

/**
Expand Down Expand Up @@ -1068,14 +1068,14 @@

$checkbox.prop('checked', false);
$option.prop('selected', false);

if (triggerOnChange) {
this.options.onChange($option, false);
}
}

this.updateButtonText();
this.updateSelectAll();

if (triggerOnChange && deselectValues.length === 1) {
this.options.onChange($option, false);
}
},

/**
Expand Down
104 changes: 102 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2627,7 +2627,7 @@ <h2 id="methods">Methods</h2>
</div>

<p>
In addition, the method provides an additional parameter: <code>.multiselect('select', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
The method provides an additional parameter: <code>.multiselect('select', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
</p>

<div class="example">
Expand Down Expand Up @@ -2673,6 +2673,56 @@ <h2 id="methods">Methods</h2>
});
});
&lt;/script&gt;
</pre>
</div>

<p>
The above parameter does also work when selecting multipe values. Note that <code>onChange</code> is called for each selected option individually!
</p>

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

$('#example-select-onChange-array-button').on('click', function() {
$('#example-select-onChange-array').multiselect('select', ['1', '3'], true);
});
});
</script>
<div class="btn-group">
<select id="example-select-onChange-array" 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>
<button id="example-select-onChange-array-button" class="btn btn-default">Select two options</button>
</div>
</div>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-select-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});

$('#example-select-onChange-button').on('click', function() {
$('#example-select-onChange').multiselect('select', '1', true);
});
});
&lt;/script&gt;
</pre>
</div>
</td>
Expand Down Expand Up @@ -2729,7 +2779,7 @@ <h2 id="methods">Methods</h2>
</div>

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

<div class="example">
Expand Down Expand Up @@ -2775,6 +2825,56 @@ <h2 id="methods">Methods</h2>
});
});
&lt;/script&gt;
</pre>
</div>

<p>
The above parameter does also work when deselecting multiple options. Note that <code>onChange</code> is called for each deselected option individually.
</p>

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

$('#example-deselect-onChange-array-button').on('click', function() {
$('#example-deselect-onChange-array').multiselect('deselect', ['1', '3'], true);
});
});
</script>
<div class="btn-group">
<select id="example-deselect-onChange-array" multiple="multiple">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3" 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-deselect-onChange-array-button" class="btn btn-default">Deselect two options</button>
</div>
</div>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-deselect-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});

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

0 comments on commit 0d50ee7

Please sign in to comment.