选择下拉方向

Question

我想知道Role(List<String> userlist){} 元素如何定义何时展开以及何时展开。

我想像kendo的DropDownList一样创建控件，但我不确定如何定义扩展方向。

在这里，我们看到由于视口结束而无法向下扩展，因此将expading方向设置为“up”：

这是相反的方向：

这是标准的选择行为，但视口容器在我的情况下是未知的。如何使用javascript确定扩展方向？

Answer 1

您可以通过访问事件对象来查看点击事件距离顶部和底部的距离。

var pretendSelect = document.querySelector('#pretendSelect');
var daDiv = document.querySelector('#daDiv')

daDiv.addEventListener('click', function(ev){
  
  pretendSelect.style.display = "block";
  pretendSelect.style.left = ev.clientX + 'px';
  
  if(ev.clientY > 120 ){
     pretendSelect.style.top = ev.clientY - 80 + 'px';
  
  } else {
    pretendSelect.style.top = ev.clientY + 'px';
  }
  
  console.log(ev.clientX);
  console.log(ev.clientY);
})

#daDiv {
  background:red;
  width:200px;
  height: 200px;
  left:0;
  top:0;
}

#pretendSelect {
  height:80px;
  position:absolute;
  background:blue;
  width:50px;
  z-index:1;
  top:0;
  display:none;
}

<div id="daDiv"></div>
<div id="pretendSelect"></div>

Answer 2

select元素的行为由浏览器控制。这里提出了一个非常相似的问题，答案准确Select drop-down list possible to "Drop-Up"

您无法直接控制选择展开框的上方或下方放置。

您可以在select元素中控制的一件事是下拉框中的项目数量。这可能会有所帮助，因为您可以强制在框中强大的物品强制它在上面。然而，它可能看起来很丑陋。

<select size="number">