views:

1176

answers:

7

Hi

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 chnaged now but in the browser it still shows old option.

I there any way to make thisch change recognized ny the browser ?

Thanks in advance.

+2  A: 

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

kanngard
+3  A: 

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';
rahul
+5  A: 

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 ';
Russ Cam
A: 

You're using replace which requires as the first argument a RegEx.

Try this:

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

Does this work for you?

Philipe Fatio
+1  A: 

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.

Will Rickards
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 . . .
Patrick Karcher
A: 

Check this

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

if it is not working change the browser.

cdb
A: 

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

N. Kramer