如何在下拉列表中添加加载更多功能

Question

我有一个简单的下拉列表

<select >
    <option value="" disabled selected>Choose your option</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>   
</select>

其中的值最多可以达到50，我想在select标签内添加更多设施(something like this)，但问题是它没有在选项标签内选择锚标签

我尝试使用this code，但在选择显示更多时，下拉列表即会关闭。

任何人都可以告诉我们如何获得此功能

Answer 1

要实现您想要的功能，您需要实现自定义下拉列表。

$('.dropdown-header').click(function(event){
	$('.dropdown-content').toggle();
  event.stopPropagation();
})

$(window).click(function(){
	$('.dropdown-content').hide();
})

$(document.body).on('click', '.option:not(.more)', function(event){
	alert('clicked option ' + this.innerHTML);
  event.stopPropagation();
})

$('.option.more').click(function(event){
	let value;
	for(var i = 0; i < 5; i++){
  	value = Math.floor((Math.random() * 100) + 1);
    $('.normal-option').append($('<div class="option">').html(value));
  }  
  event.stopPropagation();
})

.dropdown{
  display: table;
}

.dropdown-content{
  display: none;
  border: 3px solid gray;
}

.dropdown-content .normal-option .option, .dropdown-content .option{
  border-top: 1px solid gray;
  text-align: center;
  padding: 2px 10px;  
  cursor: pointer;
}

.dropdown-content .normal-option .option:hover, .dropdown-content .option:hover{
  background-color: lightgray;
}

.dropdown-header{
  border: 3px solid gray;
  padding: 10px 20px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown"> 
  <div class="dropdown-header">My Dropdown</div>
  <div class="dropdown-content">
    <div class="normal-option">
      <div class="option">A</div>
      <div class="option">B</div>
      <div class="option">C</div>
      <div class="option">D</div>
      <div class="option">E</div>
    </div>      
    <div class="option more">Load More</div>
  </div>
</div>

Answer 2

这不符合标准下拉菜单。如果您确实需要此功能，则可能需要考虑添加自定义下拉列表实现。但是，请记住，不同的平台和浏览器具有<select>的不同实现。特别是在移动浏览器上，它们可能会像底部的弹出式窗口或键盘式面板一样打开。可能是除了onChange之外没有任何事件在元素上被触发。

有许多选项的下拉菜单并不完全是用户友好的，特别是在移动设备上，因此请考虑是否可以使用其他输入表单。