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

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，我想添加load more facility (something like this)在 select 标签内，但问题是它没有在 option 标签内选择 anchor 标签

我尝试使用 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>