removing scroll elevator from <select> listbox

How do you remove the elevator from a element. Ideally, I'd like to use jquery to count the number of elements in the box and if it's greater than n hide the scroll.

Thanks for your sugges开发者_JS百科tions.

---

Well, teh internets keep telling me you can't do this with CSS/jQuery:

http://www.webdeveloper.com/forum/showthread.php?t=154496 and Hide vertical scrollbar in <select> element

The <select> element is not a "normal" element. The rendering of it doesn't seem to be entirely controllable through CSS. You can set the height/width/et al, but not the overflow attribute. JQuery can only modify the element itself or apply CSS rules after the original DOM has been loaded.

You may be able to find a custom control in the jQuery UI library that lets you do that.

---

@mcgrailm: Your solution doesn't work on Chrome. So, I suggest we can using code with remove() function replace for hide() function.

Here is another version of @mcgrailm: http://jsfiddle.net/vietean/W4nzn/1/

---

I would just hide the items greater then the number you want show like this jsfiddle

** Edit **

I modified the the above fiddle

here is the html

<select name="foo" id="myselect" multiple="true" siz="4">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>
<input type="checkbox" id="mycheckbox" />

and the jQuery

   $('#myselect').data('removedOptions', $('#myselect > option:gt(3)').detach() );

I have stored the options so you can put them back like this

var $dropdown = $('#myselect');
  $dropdown.prepend( $dropdown.data('removedOptions') );