Javascript – How to dynamically create an

html-entitieshtml-selectjavascript

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

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('&mdash; Select One &mdash;', '');
}

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

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

(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.)

Best Answer

I just realized I could use a Unicode JavaScript escape:

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

Related Solutions

Javascript – How to validate an email address in JavaScript

Using regular expressions is probably the best way. You can see a bunch of tests here (taken from chromium)

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Here's the example of regular expresion that accepts unicode:

const re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

But keep in mind that one should not rely only upon JavaScript validation. JavaScript can easily be disabled. This should be validated on the server side as well.

Here's an example of the above in action:

function validateEmail(email) {
  const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function validate() {
  const $result = $("#result");
  const email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#email").on("input", validate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for=email>Enter an email address:</label>
<input id="email">
<h2 id="result"></h2>

Javascript – How to remove all the options of a select box and then add one option and select it with jQuery

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

Best Answer

Related Solutions

Javascript – How to validate an email address in JavaScript

Javascript – How to remove all the options of a select box and then add one option and select it with jQuery

Related Topic