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

Prb with IE and setting multiple property of a SELECT tag

P: n/a
Try to run the code below in a page. You will notice than when you
switch the multiple attribute of the SELECT tag, only one option is
displayed as selected although multiple options have ben created as
selected. May somebody give me an explanation ?
<input type="button" value="test" onclick="test()"/>

<select name="tagSelect" style="width:100%">
</select>

<script defer="true">
function COption (strValue, intDefault)
{
this.value = strValue;
this.isDefault = intDefault;
}
var objOptions = new Array ();
objOptions.push (new COption ("a", 0));
objOptions.push (new COption ("b", 1));
objOptions.push (new COption ("c", 0));
objOptions.push (new COption ("d", 1));
function test () {
var intOption;
var tagOPTION;
if (tagSelect.multiple == true)
{
tagSelect.multiple=false;
}
else
{
tagSelect.multiple=true;
}
while (tagSelect.options.length != 0)
tagSelect.options.remove (0);
for (intOption in objOptions)
{
tagOPTION = document.createElement ("option");
tagSelect.options.add (tagOPTION);
tagOPTION.innerText = objOptions[intOption].value;
if (objOptions[intOption].isDefault == 1)
tagOPTION.selected = true;
}
}
</script>
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Max Weber wrote:
Try to run the code below in a page. You will notice than when you
switch the multiple attribute of the SELECT tag, only one option is
displayed as selected although multiple options have ben created as
selected. May somebody give me an explanation ?

<input type="button" value="test" onclick="test()"/>

<select name="tagSelect" style="width:100%">
</select>

<script defer="true">
function COption (strValue, intDefault)
{
this.value = strValue;
this.isDefault = intDefault;
}
var objOptions = new Array ();
objOptions.push (new COption ("a", 0));
objOptions.push (new COption ("b", 1));
objOptions.push (new COption ("c", 0));
objOptions.push (new COption ("d", 1));
function test () {
var intOption;
var tagOPTION;
if (tagSelect.multiple == true)
{
tagSelect.multiple=false;
}
else
{
tagSelect.multiple=true;
}
It's a bug, some sort of race condition or something. Because it works
if you add:

alert(tagSelect.multiple);

here (even though you're making a number of mistakes, such as replacing
this code:)
while (tagSelect.options.length != 0)
tagSelect.options.remove (0);
With this: tagSelect.options.length = 0;

And your reference to tagSelect should be via document.getElementById,
since the only browser that understands "tagSelect" as a global
reference to <select name="tagSelect"> is IE.
for (intOption in objOptions)
It's an array, you aren't accessing a set of properties. Not to mention
using "in" runs the risk of retrieving pop, push, length and numerous
other methods and properties of the Array object. Use:

for (var i = 0; i < objOptions.length; i++)

instead.
{
tagOPTION = document.createElement ("option");
tagSelect.options.add (tagOPTION);
tagOPTION.innerText = objOptions[intOption].value;
if (objOptions[intOption].isDefault == 1)
tagOPTION.selected = true;
}
tagOPTION = new Option(
objOptions[intOption].value,
objOptions[intOption].value,
(objOptions[intOption].isDefault == 1),
(objOptions[intOption].isDefault == 1)
);
tagSelect.options[tagSelect.options.length] = tagOPTION;
}
</script>


But as I said, even with the changes above it won't work because of the
issue I spelled out earlier. You'll need to find another way of doing
it (perhaps create two functions, one to populate the <select>, then
call the second to set the various Option.selected properties.

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html
Jul 23 '05 #2

P: n/a
JRS: In article <e7**************************@posting.google.com >, seen
in news:comp.lang.javascript, Max Weber <we**********@yahoo.fr> posted
at Fri, 2 Jul 2004 03:00:28 :

if (tagSelect.multiple == true)
{
tagSelect.multiple=false;
}
else
{
tagSelect.multiple=true;
}


Unless you are paid for code by the metre, that is better put as

tagSelect.multiple = !tagSelect.multiple ;
It seems possible that tagSelect.multiple ^= 1 would work; but it
might be found confusing. The advantage is that the target only needs
to be typed once; it *might* execute faster.

Your original question remains.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://jibbering.com/faq/> JL / RC : FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #3

P: n/a
Thank you pals for the infos. I didn't optimized the code coz I wanted
to keep it readable, but your advices were welcomed.

I noticed a lot of bugs since I have been working on client-side
input-and-other-controls creation. Try this and you will notice that
the jscript created checkbox is never selected despite of
"objCheckbox.checked = true".

One advice for client sided interface creation : do not use
properties, use a whole HTML description instead.

<div>
<input type="button" value="checked par JScript" onclick="test2_1
()"/>
<input type="button" value="checked par HTML" onclick="test2_2 ()"/>
</div>

<script defer="true">
function test2_1 () {
var objCheckbox;
objCheckbox = document.createElement ("input");
objCheckbox.type = "checkbox";
objCheckbox.checked = true;
tagTest2.appendChild (objCheckbox);
}
function test2_2 () {
var objCheckbox;
objCheckbox = document.createElement ("<input type=\"checkbox\"
checked/>");
tagTest2.appendChild (objCheckbox);
}
</script>
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.