语义ui滚动下拉列表不显示所选项目

Question

我正在使用语义ui滚动下拉列表。

在页面加载时，我设置选定的值。

问题是当我们默认打开下拉列表时，语义-ui显示下拉列表的第一个元素，并且不显示所选值。

如果选择其他值，则新的下拉列表位置是所选值之一。

有没有办法在第一次打开下拉列表时显示所选元素。

落下

$('.dropdown').dropdown();
$('.dropdown').dropdown( 'set selected', '10');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<div class="ui scrolling dropdown">
  <div class="text">10</div>
		<i class="dropdown icon"></i>
		  <div class="menu">
		    <div class="item" data-value="1">1</div>
        <div class="item" data-value="2">2</div>
        <div class="item" data-value="3">3</div>
        <div class="item" data-value="4">4</div>
        <div class="item" data-value="5">5</div>
        <div class="item" data-value="6">6</div>
        <div class="item" data-value="7">7</div>
        <div class="item" data-value="8">8</div>
        <div class="item" data-value="9">9</div>
        <div class="item" data-value="10">10</div>
      </div>
	</div>

Answer 1

经过一些调查后，我解决了使用.index（）和.scrollTop（）以及下拉回调.onShow

$('.dropdown').dropdown();
$('.dropdown').dropdown('set selected', '10');
$('.dropdown').dropdown({
  onShow: function(value, text) {
    setTimeout(function() {
      var preSelected = $('#dd > div.item.active.selected').index('.item');
      $('#dd').scrollTop((preSelected - 2) * 36);
    }, 100);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<div class="ui scrolling dropdown">
  <div class="text">10</div>
  <i class="dropdown icon"></i>
  <div class="menu" id="dd">
    <div class="item" data-value="1">1</div>
    <div class="item" data-value="2">2</div>
    <div class="item" data-value="3">3</div>
    <div class="item" data-value="4">4</div>
    <div class="item" data-value="5">5</div>
    <div class="item" data-value="6">6</div>
    <div class="item" data-value="7">7</div>
    <div class="item" data-value="8">8</div>
    <div class="item" data-value="9">9</div>
    <div class="item" data-value="10">10</div>
  </div>
</div>