1

I got a question about the select box in HTML where I can't seem to find the answer on with Google.

I have a select html field with 1000 options:

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
....

Now I can show the visitor all the options in 1 select box but when he needs the number 877 he needs to scroll all the way down. Is it possible to transform the select box (with javascript, or something else, PHP is also an option) to make the select box step based. So for example first you get 5 choices:

<option value="1-200">1-200</option>
<option value="201-400">201-400</option>
<option value="401-600">401-600</option>
<option value="601-800">601-800</option>
<option value="801-1000">801-1000</option>

And when he selects one of those it becomes 1-50, 51-100, 101-150, 151-200

I searched if Chosen could do this but I don't see an option where this is possible. You could search for a number but that is my last option if this isn't possible.

Kuubs
  • 1,300
  • 1
  • 14
  • 42
  • 1
    I'd suggest using something like Select2 so that the user can filter & search through all the options without having to scroll down at all. Alternatively, if the options are all literally just numbers, use a text field and have them type value in. – Rory McCrossan Mar 30 '17 at 16:05
  • 1
    Link for what @RoryMcCrossan suggested: https://select2.github.io/ – blackandorangecat Mar 30 '17 at 16:07
  • Yeah, that is the chosen-like plugin that I thought of as well. I guess that is the best option to go to. – Kuubs Mar 30 '17 at 16:12

1 Answers1

0

There are several ways of acomplishing what you want....

  1. As suggested by @Rory, Select2 is a very good option since it has search capability.
  2. However, if you must, you can count your array, then split into your desired chunk size, then insert each chunk as an optgroup element into the select, then upon clicking a group, it expands to show the options inside the group.
  3. The other way to do it is look for a plugin that has tree
  4. You can also use two select boxes, one to select the group, and the other for options
Community
  • 1
  • 1
McKabue
  • 2,076
  • 1
  • 19
  • 34