Rij Rij - 3 months ago 25
CSS Question

struts tag library - select tag

I have a dropdown list. When user click on the drop down list, I need to show first 4 items in the list and the scroll bar so that users can scroll and see the remaining items in the list.

Please find the dropdown list sample fiddle below. The same way as shown in fiddle when user click on the dropdown list, Option 1, Option 2, Option 3, Option 4 should be shown with the scrollbar to scroll and see remaining options in the list.



<select>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
<option value="four">Option 4</option>
<option value="five">Option 5</option>
<option value="siz">Option 6</option>
<option value="seven">Option 7</option>
<option value="eight">Option 8</option>
</select>





When user click on the dropdown list, 4 items and the scrollbar should be displayed. I have gone through many forums but all of those suggestions displays the dropdown list with scrollbar when page loads.
Please don't suggest as to use
size=4
attribute or
overflow-y:scroll
as its showing the scrollbar with options when page loads. I cannot use jQuery. I need to achieve this using javascript and css only.

PS: When user click on the dropdown menu then I need to show 4 options and a scrollbar and I need to achieve this using css and javascript.

I am using Struts tag library to achieve the same functionality as said above. Below is my struts html code:

<html:select name="myFormData" property="date" styleId="date" tabindex="1" title="Please Select Date">
<html:options property="date" labelProperty="date"/>
</html:select>


Any suggestion to show dropdown list values with first four items in a list and a scrollbar on click on dropdown list would be helpful with struts tag library.

Answer

You can use onmousedown to dynamically expand the select list on click and onchange/onblur event handlers to go back:

<select onmousedown="if (this.options.length > 4) this.size = 4;"  onchange="this.size = 0;" onblur="this.size = 0;">
  <option value="one">Option 1</option>
  <option value="two">Option 2</option>
  <option value="three">Option 3</option>
  <option value="four">Option 4</option>
  <option value="five">Option 5</option>
  <option value="siz">Option 6</option>
  <option value="seven">Option 7</option>
  <option value="eight">Option 8</option>
</select>