Prb with IE and setting multiple property of a SELECT tag

[Max Weber]

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>

 

[Grant Wagner]

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

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 <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_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-developer/upgrade_2.html

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen

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.

 

[Max Weber]

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>