Dynamic Select List Contents

[mike]

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.selected){alert(obj.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

 

[RobG]

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.selected){alert(obj.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;
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;
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>


[...]