title: JQuery appending a drop down option reducing whitespace into one
body: <p>I am trying to dynamically append a option in select list using jQuery:</p>
  
  <pre class="lang-js prettyprint-override"><code>let text1 = "jg";
  console.log("length of text: " + text1.length);
  $("#selectList").append($('&lt;option&gt;', {
      value: 12,
      text: text1
  }));
  </code></pre>
  
  <p>This time it gives length of text: 7</p>
  
  <p>Now I want to retrieve the selected text from select list but when I do that I get the text which has only one white space in the middle rest of the white space in between is truncated. The code I used to retrieve value from select list pasted below:</p>
  
  <pre class="lang-js prettyprint-override"><code>let e = document.getElementById("selectList");
  let selected = e.options[e.selectedIndex].text;
  console.log("text: " + selected);
  console.log("selected length: " + selected.length);
  </code></pre>
  
  <p>Now the text is just <code>j</code>, <code>g</code>, and <code>selected length: 3</code>. How can I get the above 7 length long text from select list?</p>