Question 36877 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Is there a way to implement show more in an Input select element? – Jquery

I have an input select element in Bootstrap like so :

<div class="form-group">
    <label for="exampleSelect">Example select</label>
    <select class="form-control" id="exampleSelect">
    </select>
</div>

where the options are dynamically added (JQuery), the problem is that chances are the options could be of a very high number maybe 10000 options.
My question is, is it possible to make a portion of the options hidden until the user asks for them ?

Thanks.

Tags:

2

Answers


  1. 0

    This could be done with the help of size attribute, as per specs:

    • this attribute represents the number of rows in the list that should be visible at one time.

    Here is an example of how this works:

    <script type="module">
  import { insert } from '//cdn.jsdelivr.net/npm/karyon/karyon.js';


  const options = [...Array(10000)].map((n, i) =>
      ({is: 'option', content: `option: ${i}`}));
  const select = {
      is: 'select', content: options, attrs: {size: 8}
  };

  insert(select, document.body);
</script>
    Login or Signup to reply.
  2. 0

    My suggestion from the comments would mean something like this (based on n–`s answer for generating the select field.)

    It shows only the first ten options by default, and after you click the button, and open the select again, it will show all of them.

    (Of course that is still not very fun to work with, from a user perspective …)

    select.limited option:nth-child(n+11) {
  display: none;
}
    <script type="module">
  import { insert } from '//cdn.jsdelivr.net/npm/karyon/karyon.js';


  const options = [...Array(10000)].map((n, i) =>
      ({is: 'option', content: `option: ${i}`}));
  const select = {
      is: 'select', content: options, attrs: {class: "limited"}
  };

  insert(select, document.body);
</script>
<script>
  function showAll() {
    document.querySelector('select').classList.remove('limited');
  }
</script>

<button onclick="showAll()">Show all</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search