How to add white space to the option text

[otnj2ee]

How to add white space(s) to the option text?

<select id="sel">
<option value=""></option>
</select>

<script>
var text ="abc xyz";
var value ="val";
var contrlObj = document.getElementById("sel");
var newOpt = new Option(text,value);
contrlObj.options[0] = newOpt;

</script>

No matter how many spaces I inserted, it always displayed as: abc xyz.

What I intend to to is to display it as abc xyz with multiple white spaces. I tried abc &nbsp;xyz, and it displayed as abc &nbsp;xyz.

How can I do it?


Thanks to help.

[Airblader]

Why would you want to have superfluous whitespaces there anyway? If you just want the select field to be wider, use CSS to style it.

[jmrker]

I would tend to agree with previous post,
but if you really, really, really want it
see: http://www.webdeveloper.com/forum/sh...t&daysprune=30

[Philip M]

After some experimentation I think that is not possible, at least in IE. Multiple spaces, however expressed, are collapsed into a single space. &nbsp; is, as you have found, rendered literally. Same for \u0020.

Using css can style the width of the select box, but cannot assist with adding intermediate spaces as required here.

Quizmaster: Name a character from any one of these four plays - Otheello, Macbeth, Coriolanus and Hamlet, who has a speaking part.
Contestant: Yorick.

[Philip M]

Originally Posted by jmrker

I would tend to agree with previous post,
but if you really, really, really want it
see: http://www.webdeveloper.com/forum/sh...t&daysprune=30

That did not work for me.

var x = "ABC   ABC"  // three spaces created with ALT255
alert (x);  /// ABC???ABC

[Logic Ali]

Originally Posted by otnj2ee

How to add white space(s) to the option text

var text ="abc\xA0\xA0\xA0\xA0\xA0\xA0\xA0\xA0xyz";

[Philip M]

I find that you can change the existing value of a select list option text to include intermediate spaces (which seems a bit of a hack!):-

<select id = "myselect">
<option value = 0>Select a title...</option>
<option value = 1>Whatever</option>
</select>

<script type = "text/javascript">

function changeText() {
var otxt = document.getElementById("myselect").options[1].text;
var repText = "                  abc                                  xyz"; 
document.getElementById("myselect").options[1].text = repText;
}

changeText();

</script>

As others have said, I am not sure why you would want to do this. I am sure we would all value enlightenment.

[Philip M]

Originally Posted by Logic Ali

var text ="abc\xA0\xA0\xA0\xA0\xA0\xA0\xA0\xA0xyz";

Yep, that works!

[jmrker]

Originally Posted by Philip M

That did not work for me.

var x = "ABC   ABC"  // three spaces created with ALT255
alert (x);  /// ABC???ABC

I'm not sure why not.
I tried in FF and got the display as I did within the <option> tag

Were you using the ALT key at the same time as you entered 255 on the keyboard?
Also, release the ALT key between entries.

But it does make more sense to use \xAo and it is easier to understand and replicate
if using the code at a later time.

[Logic Ali]

Originally Posted by jmrker

But it does make more sense to use \xAo and it is easier to understand and replicate
if using the code at a later time.

Remember it's A followed by zero not 'o'.

[jmrker]

Originally Posted by Logic Ali

Remember it's A followed by zero not 'o'.

Famously Fast but Failing Phanlanges
Yes it should be: \xA0