how to display as it is data on html dropdown box coming from server?

Question

Getting data from server as below

Test        Your    Code
New  Testing    Code
Opel Audi

Above data have sapace between the words. i want to show text as it is.

I have html select dropdown where i am rendering the server data.

but i am not able to diplay data as it is coming form server, it is showing one space in between the word. can anyone tell me how to fix this?

<html>
<body>

<select>
  <option value="volvo">Test        Your    Code</option>
  <option value="saab">New  Testing    Code   </option>
  <option value="opel">Opel Audi</option>
</select>

</body>
</html>

check plunkr

Possible duplicate of [Preserve whitespace in html select element options using "white-space: pre" NOT working](https://stackoverflow.com/questions/11293536/preserve-whitespace-in-html-select-element-options-using-white-space-pre-not) — Bert Maurau, Jul 23 '18 at 10:21

Baruch · Accepted Answer · 2018-07-23T10:23:12.247

1

HTML will remove any spaces following 1 space. Just replace the spaces with   (non-breaking space point)

str = str.replace(/\s/gmi, '&nbsp;');

edit: forgot semicolon

edited Jul 23 '18 at 10:23

answered Jul 23 '18 at 10:19

Baruch

2,381
1
17
29

` ` is the encoder. You can read more about `nbsp` here https://en.wikipedia.org/wiki/Non-breaking_space – Baruch Jul 23 '18 at 10:22

score 1 · Answer 2 · answered Jul 23 '18 at 10:27

1

you can use string replace method

str = str.replace("", '&nbsp');

answered Jul 23 '18 at 10:27

Anil Khatour

57
1
5

score 1 · Answer 3 · answered Jul 23 '18 at 10:29

1

Try whitespace characters   instead of spaces. In your case you need to modify text coming from server accordingly.

answered Jul 23 '18 at 10:29

Snail Pacer

91
5

how to display as it is data on html dropdown box coming from server?

3 Answers3