/    Sign up×
Community /Pin to ProfileBookmark

innerHTML and select/options

Copy linkTweet thisAlerts:
May 09.2008

Alright, been at this just about all day and I’m about SOL. I’ve searched up and down on google and on boards but haven’t found a solution that has worked.

I’ll start off by saying, if you don’t know (as I didn’t a mere 9 hours ago) that in IE7 you can’t replace the inside of a select element via innerHTML with option tags. What I am doing is returning a string of options generated via server side script through an XMLHttpRequest and then replacing the inside of a select element:

document.getElementById(‘formSelect’).innerHTML = request.responseText;

This works perfectly in all browsers except IE7, which strips the option tags for no apparent reason and returns the remaining string. Nothing I’ve tried so far has fixed it, including adding the select tags to return string both on the client side and on the server side, as well as appending using appendChild to place the return string within the select statement.

I’ve tried the very few solutions I’ve found but nothing has worked (the option tags still get stripped, so things like appendChild seem to be useless anyhow.) Basically I’m out of ideas and this entire inventory management system I have built is useless to the company (who absolutely disdain anything except IE7, go figure.)

Thanks in advance for the help.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZeroKilledMay 09.2008 — had you tried using the [b]add[/b] method instead of [b]appendChild[/b]?

<i>
</i>[I]select[/I].add([I]option[/I], [I]position[/I]);


that is the syntax, however, it behave different in msie browser. the [I]position[/I] is an element to insert the newly element before the specified position or null. but in msie the [I]position[/I] is an integer specifying the position or if not specified, it insert the option at the end.
Copy linkTweet thisAlerts:
@jelatinauthorMay 09.2008 — No I haven't tried that, but will give it a try as soon as I get to work.


Thanks.
Copy linkTweet thisAlerts:
@jelatinauthorMay 12.2008 — I gave this a try, but like you said, this is extremely quirky in IE7, which is the browser I'm having problems to begin with. It seems to be an incompatible method to use because either Firefox will error it out due to an integer [I]position[/I] or IE7 will error it out due to incorrect parameter given.

Still looking for some assistance if anyone has any ideas. Just as a refresher.

var responseText = '<option value='1'>Product 1</option>';

document.getElementById('formSelect').innerHTML = responseText;

<form>

<select id="formSelect">

</select>

</form>

Works correctly in all browsers except IE7, which strips the <option></option> tags from the entry, leaving me with

<select name="formSelect">

Product 1

</select>
Copy linkTweet thisAlerts:
@ZeroKilledMay 12.2008 — the only way to do it cross-browser and with less headache is using the [B]add[/B] method. but yes, as said before, msie except the argument as an integer while standard say it should be an option element or null in case you don't want to specify one. to solve it, you can do a try/catch:
<i>
</i>try{ // this line is executed by msie and create error by standard browser;
select.add(new option, integer );
} catch(e){// if an error occur on the try block, then execute catch block, msie skip this block;
select.add(new option, null); // or an option element within that select box;
}

Copy linkTweet thisAlerts:
@jelatinauthorMay 13.2008 — ah yes, the try / catch would resolve this issue, you're right. It was giving in error in either one or the other, didn't think to use your method, thanks.

However, I found a more specific/pre-packaged solution to the problem I was having, and if anyone is searching through the boards looking for a solution, here it is:

http://elmicoxcodes.blogspot.com/2007/02/innerhtml-and-select-option-in-ie.html

This is a link to a function I found that solves the exact problem of innerHTML / selects in IE, while continuing to function properly in all other browsers. Simply paste the function into your javascript, and call it with two paramaters: the select you would like to put options into ex- document.getElementById('formSelect'), and the string of options you would like inserted into the select statement ('<option>Option 1</option'>').

Thanks again for all the help ZeroKilled.
×

Success!

Help @jelatin 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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