0

I have a simple dropdown

<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>

The values in it can reach upto 50, i want to add load more facility (something like this) inside the select tag, but the issue is it is not picking anchor tag inside the option tag

I tried to use this code but on selecting show more, the dropdown is getting closed.

Can anyone please tell how this feature can be obtained

Sam
  • 1,381
  • 4
  • 30
  • 70
  • 5
    It cant be done using a normal dropdown. You will need to use some custom implementation of a dropdown. – Luis felipe De jesus Munoz Feb 02 '18 at 12:49
  • @LuisfelipeDejesusMunoz Is right, maybe you could use this: https://stackoverflow.com/questions/41494868/preventing-close-of-select-input-on-selection-in-react – Barskey Feb 02 '18 at 12:54
  • @Luis felipe De jesus Munoz can you please suggest some, i am not able to understand how should i do it – Sam Feb 02 '18 at 12:59
  • @user3732711 Check: https://stackoverflow.com/questions/41494868/preventing-close-of-select-input-on-selection-in-react – Barskey Feb 02 '18 at 13:00
  • ok, let me do some basic implementation of what you need, give me 5 mins – Luis felipe De jesus Munoz Feb 02 '18 at 13:03
  • @Barskey i am not aware of react, however you first suggested link might be of some help – Sam Feb 02 '18 at 13:03
  • These might help aswell: https://stackoverflow.com/questions/30237189/keeping-the-dropdown-open-after-selecting-dropdown-element & https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside – Barskey Feb 02 '18 at 13:06

2 Answers2

0

To achieve what you want you need to implement a custom dropdown.

$('.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>
Luis felipe De jesus Munoz
  • 7,454
  • 2
  • 33
  • 53
-1

This won't work with standard dropdowns. If you really need this feature, you may have to consider adding a custom dropdown implementation. However, remember that different platforms and browsers have different implementations of <select>. Especially on mobile browsers, they may open as a popup-like window or a keyboard-like panel at the bottom. It may be that no event besides onChange is fired at all on the element.

Dropdowns with many options aren't exactly user friendly, especially on mobile, so consider if it's possible to use an alternative input form.

Felix
  • 129
  • 9