Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    179
    Thanks
    17
    Thanked 0 Times in 0 Posts

    How to add white space to the option text

    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.

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    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.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 498 Times in 492 Posts
    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by jmrker View Post
    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.

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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by otnj2ee View Post
    How to add white space(s) to the option text
    var text ="abc\xA0\xA0\xA0\xA0\xA0\xA0\xA0\xA0xyz";

  • The Following 2 Users Say Thank You to Logic Ali For This Useful Post:

    otnj2ee (02-23-2013), Philip M (02-23-2013)

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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!):-


    Code:
    <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.
    Last edited by Philip M; 02-23-2013 at 06:49 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Logic Ali View Post
    var text ="abc\xA0\xA0\xA0\xA0\xA0\xA0\xA0\xA0xyz";
    Yep, that works!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    otnj2ee (02-23-2013)

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by Philip M View Post
    That did not work for me.

    Code:
    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.
    Last edited by jmrker; 02-23-2013 at 08:44 PM.

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by jmrker View Post
    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'.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 498 Times in 492 Posts

    Unhappy

    Quote Originally Posted by Logic Ali View Post
    Remember it's A followed by zero not 'o'.
    Famously Fast but Failing Phanlanges
    Yes it should be: \xA0


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •