/    Sign up×
Community /Pin to ProfileBookmark

dynamic select list in ie

Following code creates select list dynamically. I wanna find the way to select all values in created select list, but nothing seems to be work with ie. All other browsers works fine. Have not find yet any solution for this problem even search many times all over the net.

[code=php] var selectlist = document.createElement(‘select’);
selectlist.id = ‘id’;
selectlist.multiple = “multiple”;
selectlist.size = “6”;

var options = new Array(“first”,”second”,”thrid”,”fourth”,”fifth”);
for (var i=0;i<options.length;i++) {
option = document.createElement(‘option’);
option.appendChild(document.createTextNode(options[i]));
option.value = options[i];
option.selected = true;
selectlist.appendChild(option);
}

getObject(“placeInHTML”).appendChild(selectlist);

for (var i=0;i<form[‘id’].options.length;i++) {
for (var k=0;k<options.length;k++) {
if (form[‘id’].options[i].value == options[k].trim()) {
form[‘id’].options[i].selected = true;
break;
}
}
}[/code]

getObject is the function which return div-element on the html.

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@FangMay 10.2004 — IE does not update the DOM correctly, especially where [I]forms[/I] are concerned.

You can see the effect if you insert the same [I]select[/I] twice(original is correct the new one not).

Adding an [I]alert[/I] and then inserting the attributes works, but you don't want an [I]alert[/I].

You will probably have to use [I]innerHTML[/I] to insert the [I]select[/I] correctly.

You could sent [B]fredmv[/B] a pm. I vaguely recall he knew a way to "update" the DOM.

Your [I]form[/I] referencing is not wholly correct and the [I]trim[/I] function is not JS.
Copy linkTweet thisAlerts:
@tuosuauthorMay 11.2004 — Thanks for nothing. I already knew that alert makes everything work but that is not solution. Still looking for the holy truth.

Your form referencing is not wholly correct and the trim function is not JS[/QUOTE]

Form is defined ealier in my code and trim works also, cause it is

my own function.
Copy linkTweet thisAlerts:
@FangMay 11.2004 — Here's the solution:

The [I]form[/I] must be in a table for the [I]size[/I] attribute to work.

Before all/multiple options are selected a focus must be called.

The basic script:
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Add multi select&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
&lt;!--
function InsertSelect() {
var NodeToAddSelect = document.getElementById('placeInHTML');
var selectlist = document.createElement('select');
selectlist.name="sname";
selectlist.id="sid";

var ops = new Array("first","second","thrid","fourth","fifth");
for (var i=0;i&lt;ops.length;i++) {
var o = document.createElement("option");
var t = document.createTextNode(ops[i]);
o.setAttribute("value",ops[i]);
o.appendChild(t);
selectlist.appendChild(o);
}

NodeToAddSelect.appendChild(selectlist);
selectlist.multiple="multiple";
selectlist.size=5;
// Must focus to be able to select all
document.getElementById('sid').focus();

var f=document.getElementById('sid');
for (var i=0;i&lt;f.length;i++) {
f[i].selected = true;
}
}
//--&gt;
//]]&gt;
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;table border="1" cellpadding="0" cellspacing="0" summary=""&gt;
&lt;tr&gt;&lt;td&gt;
&lt;form action="#" name="myform" method="post"&gt;
&lt;div id="placeInHTML"&gt;
&lt;/div&gt;
&lt;button type="button" value="" onclick="InsertSelect()"&gt;insert&lt;/button&gt;
&lt;/form&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Tested in Moz, IE and Opera.
Copy linkTweet thisAlerts:
@fredmvMay 11.2004 — [i]Originally posted by tuosu [/i]

[B]Thanks for nothing.[/B][/QUOTE]
Lose the attitude.
Copy linkTweet thisAlerts:
@tuosuauthorMay 12.2004 — Thanks Fang to find out the solution for me. I also tried to do that with innerHTML and it works fine, but this your last solution is smt i was looking for.

Before all/multiple options are selected a focus must be called[/QUOTE]

Luckily there is the way..
Copy linkTweet thisAlerts:
@FangMay 12.2004 — update: The addition of the [I]table[/I] element is not necessary.

Another strategically placed [I]focus[/I] is all that is required.
//code snippet
NodeToAddSelect.appendChild(selectlist);
// Must focus before changing/adding attrributes
document.getElementById('sid').focus();
selectlist.multiple="multiple";
selectlist.size=5;

"focusing" on an element apparently updates the DOM in IE.
×

Success!

Help @tuosu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...