jquerydrop-down-menumaterializeonchange

jQuery Multiple Select Event when done selecting


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.


Solution

  • 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>