Question

如果我使用select元素初始化下拉列表，然后更改该元素，则在下拉列表中调用'refresh'只有一半有效：

<select id=one class="ui dropdown">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

<select id=two>
  <option value="x">X</option>
  <option value="y">Y</option>
  <option value="z">Z</option>
</select>

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

//I have templated lists that get swapped in and out
var one = document.getElementById("one");
var two = document.getElementById("two");
one.innerHTML = two.innerHTML;

$('.ui.dropdown').dropdown('refresh');
$('.ui.dropdown').dropdown('set selected', 'x');  //this doesn't work

交换选项后，下拉列表会正确显示第二个列表。我也可以手动选择它们。但是，'set selected'功能就好像那些选项不存在一样。

我已经读过“刷新”如何查找新元素而不是新元素。但是我没有任何“元素可以开始。”

Answer 1

我相信你在这里谈论同样的问题github issue2247。这使得我们两个。这似乎是＆＃34;刷新＆＃34;操作是一个异步操作，因此在刷新后立即为您的下拉列表设置选定值不会起作用，至少目前是这样 - 在此官方问题上没有给出解决方案。您可以使用setTimeout等待刷新操作完成，但它并不完美，也困扰我很多。

Answer 2

正如@lisnb在上一个回答中所说，setTimeout是一种可以解决动态添加选项问题的技巧，其用法如下：

setTimeout(function () {  
   $(id).dropdown('set selected', value);
}, 1);

但是，如果要初始化<div>元素而不是<select>的下拉列表，这还不够，您必须手动设置值和显示为选定元素的元素：

$(id).dropdown('set value', value)
setTimeout(function () {  
    $(id).dropdown('set selected', value);
}, 1);

Imho的下拉功能（特别是在动态添加选项时）是语义UI的弱点之一，应谨慎使用。

Answer 3

我在使用语义UI下拉菜单的React组件中遇到了这个问题。

这不是解决此问题的最具成本效益的方法，但是当我知道动态数据实际上将要更改时，我更喜欢破坏下拉列表并重新创建它，这似乎比摆弄异步检查要干净得多：

$('#my_dropdown').dropdown('destroy');
$('#my_dropdown').dropdown({fullTextSearch: true});

语义UI下拉列表不会从已更改的select childElement

3 个答案: