How do I dynamically create an <option> in JavaScript 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 Internet Explorer 7 ... did not test with Firefox, Safari, etc. -- Internet Explorer 7 is the only browser I need at the moment.)

Answer 1

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

Answer 2

I just realized I could use a Unicode JavaScript escape:

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

Answer 3

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 —', '');
}