dropdown change length on click

[iznubadd]

hi
can javascript do this?
i have drop-down selection from mysql query which is a long text result
like [Math 101 - Mr. Teacher; MWF 1:00-2:30; 1sem 2006-2007 ], what I'm thinking that i would display only subject names and when the user click the drop-down box it will reveal the whole text.

[jscheuer1]

I'm not sure what you are going for, and without javascript enabled, this would look real odd (a non-javascript fall back could and should be arranged). It also will look different in different browsers, and room must be allowed for in the layout for the expansion, but give this a shot:

<select name="" style="width:6.5em;"
onclick="this.size=2;this.style.width='';"
onblur="this.selectedIndex=0;this.size='';this.style.width='6.5em';">
<option value="">Math 101</option>
<option value=""> &nbsp;&nbsp;&nbsp; - Mr. Teacher; MWF 1:00-2:30; 1sem 2006-2007</option>
</select>

[iznubadd]

hi
can php/javascript do this?
what I'm thinking that i would display as default only subject names:
[Math 101]
[English 101]
and when the user click the drop-down to select box, it will reveal the whole text from mysql query result.

i have drop-down selection from mysql query result which is a long text like:
[Math 101 - Mr. Teacher; MWF 1:00-2:30; 1sem 2006-2007]
[English 101 - Mr. Professor; MWF 2:30-3:30; 1sem 2006-2007]

any ideas? plz help.

[rdutton]

Try this example, I have encapsulated what you have requested in a class.

Rather than changing the width style, this approach simply changes each option element's text using the focus/blur events.

Example - Select box, change options on click

All you have to do is include an extra attribute 'longText' in each option element to hold the longer text you are trying to display when the select box is focused.

Secondly, just create an instance of the class pointing at the select box.

I agree with jscheuer1 though, changing the size of form controls may throw some users, but I can certainly see some benifits when space is an issue...

Slight bug with IE though, that blanks out the current option when the select box is first focused, any suggestions?