ALT function on <SELECT> option

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • gekoblu

    ALT function on <SELECT> option

    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?!?
    Thanks
  • Martin Honnen

    #2
    Re: ALT function on &lt;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


    Comment

    • gekoblu

      #3
      Re: ALT function on &lt;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]

      Comment

      • Csaba Gabor

        #4
        Re: ALT function on &lt;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]


        Comment

        Working...