Skip to content

B
bootstrap-multiselect
Commit 0d50ee7e authored by davidstutz's avatar davidstutz
Browse files
Options

#528: onChange is triggered for each (de)selected option separately.

parent ce82d208
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 10 deletions
dist/js/bootstrap-multiselect.js
View file @ 0d50ee7e
...@@ -1014,14 +1014,14 @@ ...@@ -1014,14 +1014,14 @@
$checkbox.prop('checked', true); $checkbox.prop('checked', true);
$option.prop('selected', true); $option.prop('selected', true);
if (triggerOnChange) {
this.options.onChange($option, true);
}
} }
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (triggerOnChange && selectValues.length === 1) {
this.options.onChange($option, true);
}
}, },
/** /**
...@@ -1068,14 +1068,14 @@ ...@@ -1068,14 +1068,14 @@
$checkbox.prop('checked', false); $checkbox.prop('checked', false);
$option.prop('selected', false); $option.prop('selected', false);
if (triggerOnChange) {
this.options.onChange($option, false);
}
} }
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (triggerOnChange && deselectValues.length === 1) {
this.options.onChange($option, false);
}
}, },
/** /**
......
index.html
View file @ 0d50ee7e
...@@ -2627,7 +2627,7 @@ ...@@ -2627,7 +2627,7 @@
</div> </div>
<p> <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> </p>
<div class="example"> <div class="example">
...@@ -2673,6 +2673,56 @@ ...@@ -2673,6 +2673,56 @@
}); });
}); });
&lt;/script&gt; &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> </pre>
</div> </div>
</td> </td>
...@@ -2729,7 +2779,7 @@ ...@@ -2729,7 +2779,7 @@
</div> </div>
<p> <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> </p>
<div class="example"> <div class="example">
...@@ -2775,6 +2825,56 @@ ...@@ -2775,6 +2825,56 @@
}); });
}); });
&lt;/script&gt; &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> </pre>
</div> </div>
</td> </td>
......
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