I have a <select>
input field that has the multiple
flag enabled so a user can select multiple options at once.
When I add the change()
event, it runs whenever the user selects a new option. Is there a way to have a function run when the user is done selecting their options?
Here is what I currently have:
$("#myselect").change(function(){
console.log($(this).val());
});
Currently this runs every time a new option is selected. I would like to have it run once the select list is closed.
Edit: My HTML is the basic code from MaterializeCSS
<div class="input-field col s12">
<select name="myselect" multiple>
<option value="All" selected>All</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
What I am trying to do is have it so if 'All' is selected, and another option is picked, it will deselect 'All'. When using MaterializeCSS framework, when I run $("#myselect").formSelect();
, it defocuses the select dropdown so I am trying to only have it run once when the user is done selecting their options.
Is there a way to have a function run when the user is done selecting their options?
You can use dropdownOptions option:
$('#myselect').formSelect({
dropdownOptions: {
onCloseEnd: function(e) {
console.log(e.value);
}
}
});
if 'All' is selected, and another option is picked, it will deselect 'All'.
In order to achieve that your change event could be:
$("#myselect").on('change', function(e){
var selectedItems = $(this).val() || [];
// if All and another option(s) are selected....
if (selectedItems.length > 1 && selectedItems.indexOf('All') >= 0) {
// deselect All....
$(this).siblings('ul.select-dropdown')
.find('li.selected:contains(All)').trigger('click');
}
});
$('#myselect').formSelect({
dropdownOptions: {
onCloseEnd: function(e) {
console.log(e.value);
}
}
});
$("#myselect").on('change', function(e){
var selectedItems = $(this).val() || [];
if (selectedItems.length > 1 && selectedItems.indexOf('All') >= 0) {
$(this).siblings('ul.select-dropdown').find('li.selected:contains(All)').trigger('click');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="row">
<form class="col s12">
<div class="row">
<div class="col s12">
<br>
<p>Demo.......</p>
</div>
<div class="input-field col s12 m6">
<select id="myselect" name="myselect" multiple>
<option value="All" selected>All</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
</div>
</form>
</div>