How to display multiple spaces in HTML select list <option></option>

Question

jsfidder here http://jsfiddle.net/a3LwW/4/

My problem is I have multiple spaces in the content of <option>

jQuery val() gives me correct value, but browser renders the <option> as if there is only a single space in the string.

Is there a way to to render multiple spaces correctly in <option>??

I tried <option><pre>three spaces</pre></option>, but it doesn't do what I want.

HTML

<select id="list">
    <option>one space</option>
    <option>two  spaces</option>
    <option>three   spaces</option>
</select>
<p>Current Value:<pre id="val"></pre></p>

JS

function update_val () {
    $('#val').text($('#list').val()); 
}

$('#list').change(update_val);

//init
update_val();

Answer 1

I think You can use native PHP character like "\xC2\xA0".

More characters you can get by PHP function html_entity_decode:

$nbsp = html_entity_decode(' ');
$str = 'Hello' . $nbsp . 'World!';

Answer 2

Try the whitespace characters other than   such as  ,  ,and  .

Like

 <option>three &emsp; spaces</option>

Answer 3

Use   (normally you shouldn't use this for spacing, but you don't have many more options in <select> elements):

<select id="list">
    <option>one space</option>
    <option>two &nbsp;spaces</option>
    <option>three &nbsp;&nbsp;spaces</option>
</select>

Updated Fiddle