Javascript: How to dynamically create an <option> that contains an HTML entity (— ... «)

Question

I'd like to add an <option> element to a <select> element where the <option> element's text contains an HTML entity: &mdash;

In HTML, the code would look like this:

<select name="test" id="test">
<option value="">&mdash; Select One &mdash;</option>
</select>

My Javascript code looks like this:

function selectOne() {
  var e = document.getElementById('test');
  e.options[0] = new Option('— Select One —', '');
}

However, as you will see if you test this, the &mdash; becomes escaped. I had the same outcome when I tried:

e.options[o].text = '— Select One —';

(observed behavior was in IE7 ... did not test with FireFox/Safari/etc -- Ie7 is the only browser I need at the moment).

Answer 1

You don't need to escape the entity - it works like this:

function selectOne() {
      var e = document.getElementById('test');
      e.options[0] = new Option('— Select One —', '');
}

Answer 2

I just realized I could use a unicode javascript escape:

e.options[0] = new Option('\u2014 Select One \u2014', '');

Answer 3

text property doesn't get unescaped, as it is meant to be taken literally. If you use innerHTML, the entities get converted to corresponding characters.

e.options[o].innerHTML = '— Select One —';