By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,247 Members | 1,018 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,247 IT Pros & Developers. It's quick & easy.

Dynamic Select List Contents

P: n/a
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

Jan 19 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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
Jan 20 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.