Question

我正在使用SemanticUI作为下拉列表

<div class="ui dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="male">Male</div>
    <div class="item" data-value="female">Female</div>
  </div>
</div>

在我的页面底部，我将其初始化为

jQuery(document).ready(function($) {
    $('.ui.dropdown')
  .dropdown()
;
});

问题在于，当用户选择某个项目时，它不会更新，并且会一直显示默认值为已选中。但是当我转到Chrome控制台并执行上面的代码JQuery（文档）...时，它工作正常。

我假设它是由于初始化需要在页面加载完全后执行。所以，我所做的是以下而不是上述内容：

window.addEventListener("load", function(){
jQuery(document).ready(function($) {

    $('.ui.dropdown')
  .dropdown()
;
});
});;

有效。下拉列表立即更新选择。但是，当我点击提交，我和页面重新加载时，选择将丢失。下拉列表用作表格的过滤器。选择在提交时丢失，使过滤器无法使用。

解决这个问题的最佳方法是什么？

Answer 1

使用AJAX提交表单，以便页面不刷新。

Answer 2

  <select>
    <option value="male">Male</option>
    <option value="female">Female</option>
</select>

没有额外的js，需要css，

编辑：不需要自动填充属性，因为它是默认值

下拉列表未更新选定值（SemanticUI）

2 个答案: