title: How to display load more functionality using select tag
body: <p>I have a load more functionality code that works perfectly fine for list items
  <a href="https://jsfiddle.net/learner001/4qqgma5L/3/" rel="nofollow noreferrer">Fiddle for list items</a></p>
  <p>Now I am trying to replicate this same functionality inside a select tag. When a user clicks on option tag 3 values along with load more inside the dropdown should be visible and after clicking on load more next set of 3 items should be visible without closing the dropdown</p>
  <p>Code that i am trying is</p>
  <pre><code>&lt;select class=&quot;form-control&quot; id=&quot;myList&quot;&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;&quot;&gt;Please select&lt;/option&gt;  
    &lt;option  id=&quot;sec&quot; value=&quot;1&quot;&gt;1&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;2&quot;&gt;2&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;3&quot;&gt;3&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;4&quot;&gt;4&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;5&quot;&gt;5&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;6&quot;&gt;6&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;7&quot;&gt;7&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;8&quot;&gt;8&lt;/option&gt;
    &lt;option  id=&quot;sec&quot; value=&quot;9&quot;&gt;9&lt;/option&gt;
    &lt;option value=&quot;&quot;&gt;
      &lt;div id=&quot;loadMore&quot;&gt;Load more&lt;/div&gt;
    &lt;/option&gt;
  &lt;/select&gt;
  
  $(document).ready(function () {
      size_li = $(&quot;#sec&quot;).size();
      x=3;
      $('#sec:lt('+x+')').show();
      $('#loadMore').click(function () {
          x= (x+5 &lt;= size_li) ? x+5 : size_li;
          $(' #sec:lt('+x+')').show();
          if(x == size_li){
              $('#loadMore').hide();
          }
      });
  });
  </code></pre>
  <p>Complete code for select tag <a href="https://jsfiddle.net/learner001/pegctker/14/" rel="nofollow noreferrer">is here</a></p>
  <p>Can anyone please tell how I can achieve this feature</p>