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

Posted 2023-03-27

【中文标题】语义 ui 滚动下拉列表不显示所选项目

【英文标题】：semantic ui scrolling dropdown doesn't show the selected item

【发布时间】：2019-07-13 05:08:49

【问题描述】：

我正在使用语义 UI 滚动下拉菜单。

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

问题是当我们默认打开下拉菜单时，semantic-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>

【参考方案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>