ALT function on <SELECT> option

**Martin Honnen** · Jul 23 '05, 10:29 AM

Re: ALT function on <SELECT&g t; option

gekoblu wrote:
[color=blue]
> Hi!, I want to fix via javascript the combo width to a fix value. I'd
> like to implement a kind of ALT / TITLE function to show the entire
> option when the text is longer than the combo width...
> It's possible?!?[/color]

You can set the width with CSS, you can set the title attribute as a
property with JavaScript:

<html lang="en">
<head>
<title>settin g title of select element</title>
<script type="text/javascript">
function setTitleToSelec tedText (select) {
if (select.selecte dIndex > -1) {
select.title = select.options[select.selected Index].text;
}
}
</script>
<style type="text/css">
select {
width: 100px;
}
</style>
</head>
<body>
<form name="formName" action="">
<p>
<select name="select1" onchange="setTi tleToSelectedTe xt(this);">
<option>optio n 1 option 1 option 1</option>
<option>optio n 2 option 2 option 2</option>
<option>optio n 3 option 3 option 3</option>
</select>
</p>
<p>
<select name="select2" onchange="setTi tleToSelectedTe xt(this);" size="3">
<option>optio n 1 option 1 option 1</option>
<option>optio n 2 option 2 option 2</option>
<option>optio n 3 option 3 option 3</option>
</select>
</p>
</form>
<script type="text/javascript">
setTitleToSelec tedText(documen t.forms.formNam e.elements.sele ct1);
setTitleToSelec tedText(documen t.forms.formNam e.elements.sele ct2);
</script>
</body>
</html>

Note however that IE/Win doesn't support this (title attribute/property
of <select> elements), but Mozilla, Netscape 6/7, Opera 7 do
--

Martin Honnen

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

**gekoblu** · Jul 23 '05, 10:30 AM

Re: ALT function on <SELECT&g t; option

Thanks Martin, unfortunately I had to use IE 6...
another problem is: if I fix the combo width, also the drop down menu
is resized and if the option is longer, it will be cutted!
I'd like a 'title' for each option even in the drop down, even befor a
select action... Do you think I'm wondering the moon?!? :-)

Martin Honnen <mahotrash@yaho o.de> wrote in message news:<408d1012$ 1@olaf.komtel.n et>...[color=blue]
> gekoblu wrote:
>[color=green]
> > Hi!, I want to fix via javascript the combo width to a fix value. I'd
> > like to implement a kind of ALT / TITLE function to show the entire
> > option when the text is longer than the combo width...
> > It's possible?!?[/color]
>
> You can set the width with CSS, you can set the title attribute as a
> property with JavaScript:
>
> <html lang="en">
> <head>
> <title>settin g title of select element</title>
> <script type="text/javascript">
> function setTitleToSelec tedText (select) {
> if (select.selecte dIndex > -1) {
> select.title = select.options[select.selected Index].text;
> }
> }
> </script>
> <style type="text/css">
> select {
> width: 100px;
> }
> </style>
> </head>
> <body>
> <form name="formName" action="">
> <p>
> <select name="select1" onchange="setTi tleToSelectedTe xt(this);">
> <option>optio n 1 option 1 option 1</option>
> <option>optio n 2 option 2 option 2</option>
> <option>optio n 3 option 3 option 3</option>
> </select>
> </p>
> <p>
> <select name="select2" onchange="setTi tleToSelectedTe xt(this);" size="3">
> <option>optio n 1 option 1 option 1</option>
> <option>optio n 2 option 2 option 2</option>
> <option>optio n 3 option 3 option 3</option>
> </select>
> </p>
> </form>
> <script type="text/javascript">
> setTitleToSelec tedText(documen t.forms.formNam e.elements.sele ct1);
> setTitleToSelec tedText(documen t.forms.formNam e.elements.sele ct2);
> </script>
> </body>
> </html>
>
> Note however that IE/Win doesn't support this (title attribute/property
> of <select> elements), but Mozilla, Netscape 6/7, Opera 7 do[/color]

**Csaba Gabor** · Jul 23 '05, 10:30 AM

Re: ALT function on <SELECT&g t; option

In IE 6, one way that you have to display the complete option
is to put (via javascript) a title on the word that you have sitting
next to the SELECT element saying what it is (like Choices:). Then
IF the user thinks to put hir mouse over that word, he could find out
what the complete option is. However, this still won't do what you're
asking for (where there is a title as you hilight a choice before
selection).

Csaba Gabor

"gekoblu" <gekoblu@tiscal i.it> wrote in message
news:478de077.0 404270305.14bb1 023@posting.goo gle.com...[color=blue]
> Thanks Martin, unfortunately I had to use IE 6...
> another problem is: if I fix the combo width, also the drop down menu
> is resized and if the option is longer, it will be cutted!
> I'd like a 'title' for each option even in the drop down, even befor a
> select action... Do you think I'm wondering the moon?!? :-)
>
>
> Martin Honnen <mahotrash@yaho o.de> wrote in message[/color]
news:<408d1012$ 1@olaf.komtel.n et>...[color=blue][color=green]
> > gekoblu wrote:
> >[color=darkred]
> > > Hi!, I want to fix via javascript the combo width to a fix value. I'd
> > > like to implement a kind of ALT / TITLE function to show the entire
> > > option when the text is longer than the combo width...
> > > It's possible?!?[/color]
> >
> > You can set the width with CSS, you can set the title attribute as a
> > property with JavaScript:
> >
> > <html lang="en">
> > <head>
> > <title>settin g title of select element</title>
> > <script type="text/javascript">
> > function setTitleToSelec tedText (select) {
> > if (select.selecte dIndex > -1) {
> > select.title = select.options[select.selected Index].text;
> > }
> > }
> > </script>
> > <style type="text/css">
> > select {
> > width: 100px;
> > }
> > </style>
> > </head>
> > <body>
> > <form name="formName" action="">
> > <p>
> > <select name="select1" onchange="setTi tleToSelectedTe xt(this);">
> > <option>optio n 1 option 1 option 1</option>
> > <option>optio n 2 option 2 option 2</option>
> > <option>optio n 3 option 3 option 3</option>
> > </select>
> > </p>
> > <p>
> > <select name="select2" onchange="setTi tleToSelectedTe xt(this);"[/color][/color]
size="3">[color=blue][color=green]
> > <option>optio n 1 option 1 option 1</option>
> > <option>optio n 2 option 2 option 2</option>
> > <option>optio n 3 option 3 option 3</option>
> > </select>
> > </p>
> > </form>
> > <script type="text/javascript">
> > setTitleToSelec tedText(documen t.forms.formNam e.elements.sele ct1);
> > setTitleToSelec tedText(documen t.forms.formNam e.elements.sele ct2);
> > </script>
> > </body>
> > </html>
> >
> > Note however that IE/Win doesn't support this (title attribute/property
> > of <select> elements), but Mozilla, Netscape 6/7, Opera 7 do[/color]
>[/color]

ALT function on <SELECT> option

ALT function on <SELECT> option

Comment

Comment

Comment