Select tag Load More

How to display load more functionality using select tag

by abbaspanjwani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<select id ="myList" class="selectpicker">
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='-1'>Load More</option>
  
</select>

JavaScript

$(document).ready(function(){
	var i= 0;
  $('#myList').on('select',function(){
  alert(1);
  });
  $('#myList').on('change',function(){
    if($(this).val()==-1){
    	$("#myList option[value='-1']").remove();
    	var howManyRecordYouWantMore = 3;
        for(;howManyRecordYouWantMore>0;howManyRecordYouWantMore--){
        	i++;
          $("#myList").append('<option value="'+i+'">option'+i+'</option>');
        }
        $("#myList").append('<option value="-1">Load More</option>');
        $('.selectpicker').selectpicker('refresh');
        $('.selectpicker').selectpicker('show');
    }
  });
  $('#myList').on('rendered.bs.select', function (e) {
  	// do something...
  	alert(11);
	});
  $('#myList').on('shown.bs.select', function (e) {
  	// do something...
  	alert(22);
	});
});