innerHTML replace does not reflect

Question

I have HTML something like this

<div id="foo">
<select>
<option> one </option>
</select>
</div>

when I use

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

The innerHTML get replaced but it does not get reflected in the browser.

If I alert innerHTML I can see that it has been changed now but in the browser it still shows old option.

Is there any way to make this change recognized by the browser ?

Thanks in advance.

Solution 1

works fine for me in Firefox 3.5

Working Demo

EDIT: You must be using IE. You need to create a new option and add it to the element, or amend the text of the existing option

Working Demo - tested and working in FireFox and IE 7.

var foo = document.getElementById('foo');
var select = foo.getElementsByTagName('select');
select[0].options[0].text = ' two ';

Solution 2

Better to give an id to the select tag and use new option to add an item.

var sel =document.getElementById ( "selectElementID" );
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + 2;
elOptNew.value = 'insert' + 2;
sel.options.add ( elOptNew );

If you need to replace an option

sel.options[indexNumber].text = 'text_to_assign';
sel.options[indexNumber].value = 'value_to_assign';

Solution 3

Setting the innerHTML of a select has a bug in IE. Not sure if they fixed this in 7 or 8 yet. It cuts off some of the text you give it and thus has malformed options. So you have to set the outerHTML which includes the select. Since outerHTML is IE only (or was) I normally use select.parentNode.innerHTML. And I assign the ID to the select. But since you are setting the innerHTML of the div, you are already covered. That was just an FYI.

I think your real problem is that replace is expecting a regular expression for the first argument. Or that the option element is not what you expect. IE can capitalize the option name and might be adding a selected attribute. You should alert the innerHTML to see what it is before attempting to do a string replace. Then I would use a valid regular expression to do the replace. You'll probably have to escape the slash with a backslash. I'm don't think you need to escape the angle brackets but I'm not 100% on that.

Also in my experience the DOM method (new Option) is slower. When you have to replace a large number of options it is significantly slower. If you just have to replace one or two, you can use the DOM method.

Solution 4

I guess you are using IE? The problem is that you have to use new Option(...) to populate SELECTs in IE. Like this:

document.getElementsByTagName('select')[0].options[0]=new Option(' two ');

Edit: There is a Microsoft Knowledgebase article about this bug: http://support.microsoft.com/kb/276228

Solution 5

A solution I worked out goes as follows

strHTML = "&nbsp;<option value=""1"">Text1</option>"
strHTML = strHTML + "<option value=""15"">Text2</option>"
strHTML = strHTML + "<option value=""17"">Text3</option>"


document.getElementById("id-selectbox").innerHTML=strHTML;
if(Browser=="Internet Explorer"){
    document.getElementById("id-selectbox").outerHTML=document.getElementById("id-selectbox").outerHTML;
}

The HTML string could be obtained by an AJAX request.

The result is that the browser will rewrite/render the selectbox with its newly added options.

Notice the: &nbsp preciding the first option code If you leave this out, the first option will loose its option tags and therefor will not be shown in the new added select-innerHTML

View more solutions

Comments

[Patrick Karcher]

Someone finally described my problem (and the solution) in a straightforward manner. Thanks! I'm so happy, I'm gonna check out your other answers and see what hasn't gotten the upvotes it deserves . . .

[jmishra]

No, the first argument can also be a substring. Checkout the W3C specs for it.