我有一个简单的下拉菜单
<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但在选择显示更多时,下拉菜单正在关闭。
任何人都可以告诉如何获得此功能
最佳答案
要实现您想要的效果,您需要实现自定义下拉菜单。
$('.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>
关于javascript - 如何在下拉列表中添加加载更多功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48583056/