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.

Answer 1

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.

Answer 2

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 ';

Answer 3

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';