重置语义 UI 触发 onChange 的下拉菜单 Callback/Event-handler

Question

我正在使用 Semantic UI Dropdown，但在将下拉菜单重置回页面加载状态时遇到了一些麻烦。基本上重置选择。

我尝试了 2 种不同的方法，但都没有真正给我想要的东西 （我还有 2 种不同类型的下拉列表 - 普通的旧选择类型和它所在的可搜索类型根据您在输入中键入的内容过滤掉选项).

方法

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

我从这两种方法中遇到的一个常见问题是，它触发了下拉菜单的 onChange callback/event-handler - 我在其中进行了 AJAX 调用。我想在不调用 onChange callback/event-handler.

的情况下 重置下拉菜单

这两种方法的另一个常见问题是，对于我可以搜索选项的下拉菜单 - 如果我搜索选项中不存在的内容并获得 No results found. 并单击它选项然后启动任何一种方法都不会清除它。搜索文本保留在那里，选项保持过滤状态。

我在使用 "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");
  });
});

Answer 1

尝试使用更详细和结构化的 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"> 指定 placeholder .

查看此 fiddle 以获得完整示例。

至于 ajax 调用，您可以检查 onChange 处理程序中是否有一些值 - 它在 'restore defaults' 上将为空：

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