Сброс семантических раскрывающихся списков пользовательского интерфейса, запускаемых при обратном вызове изменения / обработчике событий

Я использую раскрывающийся список семантического пользовательского интерфейса, и у меня возникли проблемы с сбросом раскрывающегося списка обратно в состояние загрузки страницы. В основном сброс выбора.

Я пробовал 2 разных подхода, но оба не дают мне того, что я ищу (у меня также есть 2 разных типа раскрывающихся списков - простой старый тип выбора и тип с возможностью поиска, где он отфильтровывает варианты в зависимости от того, что вы вводите ввод).

Подходы

$(".ui.dropdown").dropdown("restore defaults");
$(".ui.dropdown").dropdown("clear");

Обычная проблема, которую я получаю при любом подходе, заключается в том, что он запускает onChange обратный вызов / обработчик событий раскрывающихся списков, где я выполняю вызов AJAX. Я хотел бы сбросить выпадающие меню без вызова onChange обратного вызова / обработчика событий.

Другая проблема, которая характерна для любого подхода, заключается в том, что для раскрывающихся списков, где я могу искать вариант - если я ищу что-то, чего нет в параметрах, получаю No results found. и нажимаю на этот вариант, а затем инициирую любой подход, который выиграл ' t очистить это. Текст поиска остается там, а параметры остаются отфильтрованными.

Конкретная проблема, с которой я сталкиваюсь при использовании "clear", заключается в том, что для раскрывающихся списков, в которых вы не можете выполнять поиск (основной тип выбора), он буквально очищает его, и поэтому ничего не выбирается, даже если в раскрывающемся списке по умолчанию используется первый вариант.

Вот Fiddle, который я приготовил, чтобы вы увидели мою проблему.

HTML

<select name="firstname" class="search ui dropdown">
  <option value="">Firstname</option>
  <option value="1">Ahmed</option>
  <option value="2">Brodie</option>
  <option value="3">Cameron</option>
  <option value="4">Doug</option>
  <option value="5">Ely</option>
  <option value="6">Fionna</option>
</select>

<select name="gender" class="no-search ui dropdown">
  <option value="0">Male</option>
  <option value="1">Female</option>
</select>

<button>
  <span>Reset</span>
</button>

JQuery

$(document).ready(function() {
    $(".search.ui.dropdown").dropdown({
    allowAdditions: false,
    fullTextSearch: true,
    sortSelect: true,
    onChange: function(value, text, choice) {
        alert("FIRST NAME - on change event fired - Run some AJAX.");
    }
  });

  $(".no-search.ui.dropdown").dropdown({
    allowAdditions: false,
    sortSelect: true,
    onChange: function(value, text, choice) {
        alert("GENDER - on change event fired - Run some AJAX.");
    }
  });

  $("button").click(function() {
    // $(".ui.dropdown").dropdown("clear");
    $(".ui.dropdown").dropdown("restore defaults");
  });
});

Patrick Gregorio 18.08.2016 источник

Ответы (1)

arrow_upward
1
arrow_downward

Попробуйте использовать более подробный и структурированный html со скрытыми входами вместо старых вариантов:

  <div class="no-search ui selection dropdown">
    <input type="hidden" name="gender" />
    <div class="text">Male</div>  <!-- Selection by default -->
    <div class="menu">
      <div class="active item" data-value="0" data-text="Male">
        Male
      </div>
      <div class="item" data-value="1" data-text="Female">
        Female
      </div>
    </div>
    <i class="dropdown icon"></i>
  </div>

Обратите внимание, что вы можете указать выбор по умолчанию с <div class="text"> или заполнитель с <div class="default text">.

См. Полный пример скрипки.

Что касается вызовов ajax, вы можете проверить, есть ли у вас какое-то значение в обработчике onChange - оно будет нулевым при восстановлении значений по умолчанию:

onChange: function(value, text, choice) {
  if (typeof value !== "undefined") {
    // ajax call
  }
}

Kemi 19.08.2016

comment

Спасибо. Я пошел с if(typeof value !== "undefined"). - Patrick Gregorio; 19.08.2016