I have a select list defined like:

<select name="cri2" multiple style="height:220px; width:300px;"
	onClick="show_content(this);">
</select>

I add content to it dynamically using a function like:

function addOption(theSel, theText, theValue, optionColor)
	{
	var newOpt = new Option(theText, theValue);
	var selLength = theSel.length;
	theSel.options[selLength] = newOpt;
	theSel.options[selLength].style.color = optionColor;
	}

Sometimes the text content is so large that I need the user to be able
to see it using the onclick event in the select like:

function show_content(obj)
        {
        //this did not work i got an error about the object not
supporting this property or method
        //alert(obj.options[obj.selectedIndex].value);
       for ( var i=0; i<obj.length; i++ )
            {
	if (obj[i].selected){alert(obj[i].value);break;}
            }
        }

The pointer seems all screwed up. the first time i click on it i get
nothing. then the next time i get the alert. If there are 3 items the
alert is for the last item i clicked on.

Any help is appreciated.

Mike

mike wrote:
> I have a select list defined like:
> 
> <select name="cri2" multiple style="height:220px; width:300px;"
> 	onClick="show_content(this);">
> </select>

IE fires the onclick event before it sets the option to selected, so you 
  don't get the one that was just clicked on.  I think it expects that 
the first click is on the drop-down arrow not one of the options.


> 
> I add content to it dynamically using a function like:
> 
> function addOption(theSel, theText, theValue, optionColor)
> 	{
> 	var newOpt = new Option(theText, theValue);
> 	var selLength = theSel.length;
> 	theSel.options[selLength] = newOpt;

         theSel.options[theSel.options.length] = newOpt;

Remove the 'var selLength = ...' line.


> 	theSel.options[selLength].style.color = optionColor;

Test for support for the style object, you already have a reference to 
the option, why get it again?

         if (newOpt.style) {
           newOpt.style.color = optionColor;
         }

> 	}
> 
> Sometimes the text content is so large that I need the user to be able
> to see it using the onclick event in the select like:
> 
> function show_content(obj)
>         {
>         //this did not work i got an error about the object not
> supporting this property or method
>         //alert(obj.options[obj.selectedIndex].value);
>        for ( var i=0; i<obj.length; i++ )
>             {
> 	if (obj[i].selected){alert(obj[i].value);break;}
>             }
>         }

Once the wrapping error from your comment is removed, it 'works' for me. 
   A more efficient routine is:

   function show_content(obj)
   {
     var op, s = [];
     for (var i=0, len=obj.options.length; i<len; ++i) {
       op = obj.options[i];
       if (op.selected) s[s.length] = op.text;
     }
     alert(s.join('\n'));
   }


Here's a working example:

   <script type="text/javascript">

   function addOption(theSel, theText, theValue, optionColor)
   {
     var newOpt = new Option(theText + '-' + theSel.length,
                             theValue + '-' + theSel.length);
     theSel.options[theSel.options.length] = newOpt;
     newOpt.style && (newOpt.style.color = optionColor);
   }

   function show_content(obj)
   {
     var op, s = [];
     for (var i=0, len=obj.options.length; i<len; ++i)
     {
       op = obj.options[i];
       if (op.selected) s[s.length] = op.text;
     }
     alert(s.join('\n'));
   }

   </script>

   <input type="button" value="Add one"
   onclick="addOption(document.getElementById('cri2'),
                     'theText', 'theValue', 'red')">

   <select name="cri2" id="cri2"
     multiple style="height:220px; width:300px;"
     onchange="show_content(this);">
   </select>


[...]


-- 
Rob