jQuery Multiple Select Event, когда закончите выбор - PullRequest
Новая
       26

jQuery Multiple Select Event, когда закончите выбор

0 голосов
/ 24 августа 2018

У меня есть поле ввода <select>, в котором включен флаг multiple, поэтому пользователь может выбрать сразу несколько параметров.

Когда я добавляю событие change(), оно запускается всякий раз, когда пользователь выбирает новую опцию. Есть ли способ запустить функцию, когда пользователь завершил выбор своих параметров?

Вот что у меня сейчас есть: 

$("#myselect").change(function(){
    console.log($(this).val());
});

В настоящее время это выполняется каждый каждый раз, когда выбирается новая опция. Я хотел бы, чтобы он запускался после закрытия списка выбора.

Редактировать: мой HTML является основным кодом из 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>

То, что я пытаюсь сделать, это сделать так, чтобы, если выбрано «Все» и была выбрана другая опция, она отменила выбор «Все». При использовании MaterializeCSS Framework, когда я запускаю $("#myselect").formSelect();, он расфокусирует выпадающий список, поэтому я пытаюсь запустить его только один раз, когда пользователь завершит выбор своих опций.

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Есть ли способ запустить функцию, когда пользователь завершит выбор своих параметров?

Вы можете использовать dropdownOptions параметр: 

$('#myselect').formSelect({
    dropdownOptions: {
        onCloseEnd: function(e) {
            console.log(e.value);
        }
    }
});

, если выбрано «Все» и выбрана другая опция, она отменит выбор «Все».

Для достижения этого события change может быть: 

$("#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>
0 голосов
/ 25 августа 2018

Как вы определяете, когда пользователь завершил выбор? Вы можете попробовать другие события, кроме change().

, например focusout() или keyup()

см .: https://api.jquery.com/focusout/

...