2

I've been trying to find a solution and example for this problem for a while now.

We have a combobox with a lot of options, ranging from 1 up to atleast 100.

Our customers don't always use proper resolutions so for some the options will scroll out of the screen.

What we want is to have the normal HTML combobox but when you click it show a "box" which shows only 10 options with a scrollbar to scroll to the other 90 options

Example:

Example

This example is (probably) made in winforms but I want to have this as a html/javascript(jquery). At which point the options will not be visible unless you click the control (As a normal combobox would work)

Attempts I have already: - tried putting the combobox in divs and giving it a size. But that will make it loose the popup function and we want to keep that.

  • tried every other post in stackoverflow that concerned combobox's (dropdownbox) with vertical scrollbars

  • added "size='5'" but this would just make it a listbox instead of a combobox

  • added "multiple='yes'" but this doesn't do anything usefull for my cause

Theun Arbeider
  • 5,259
  • 11
  • 45
  • 68

3 Answers3

1

You can try this..

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
     <option value="1">This is select number 1</option>
     <option value="2">This is select number 2</option>
     <option value="3">This is select number 3</option>
     <option value="4">This is select number 4</option>
     <option value="5">This is select number 5</option>
     <option value="6">This is select number 6</option>
     <option value="7">This is select number 7</option>
     <option value="8">This is select number 8</option>
     <option value="9">This is select number 9</option>
     <option value="10">This is select number 10</option>
     <option value="11">This is select number 11</option>
     <option value="12">This is select number 12</option>
   </select>
Sengottuvelu Muthusamy
  • 13
  • 1
  • 3
-1

I'm not really sure if I'm getting it, but is this what you are looking for: you could just set the size of the select item which is generated.

Community
  • 1
  • 1
Bob Claerhout
  • 781
  • 5
  • 24
  • As I said, and the example shows. I want it to show ONLY the selected option, with a arrow down next to it. When you click it I want it to show the options with the scrollbar. Your example lacks the original selected option box – Theun Arbeider Aug 15 '13 at 13:36
  • Selecting an option from this "select" is explained here: http://www.w3schools.com/jsref/prop_option_selected.asp – Bob Claerhout Aug 15 '13 at 13:42
-1

Add this line of style in your component: style="height: 200px; width: 300px;".

. . .

Woot
  • 1
  • 1