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