Question

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

我尝试了两种不同的方法，但两者都没有真正给我我正在寻找的东西（我也有2种不同类型的下拉菜单 - 普通的旧选择类型和可搜索的类型，它过滤掉了选项根据您在输入中键入的内容。

途径

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

我从这两种方法中得到的一个常见问题是，它会触发下拉列表的onChange回调/事件处理程序 - 我在其中进行AJAX调用。我想重置下拉列表，不用调用onChange回调/事件处理程序。

这两种方法中常见的另一个问题是，对于我可以搜索选项的下拉菜单 - 如果我搜索选项中不存在的内容并获得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而不是oldschool选择：

  <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">指定占位符。

有关完整示例，请参阅此fiddle。

对于ajax调用，您可以检查onChange处理程序中是否有某些值 - 在'恢复默认值'时它将为null：

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

重置语义UI下拉列表触发onChange回调/事件处理程序

途径

HTML

Jquery的

1 个答案: