javascript 在 HTML 选择选项中保留空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7813832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preserving white space in an HTML select option
提问by Erik
I have a set of html text boxes that take input and when the user clicks an 'add' button uses javascript to take the text input and format a string that is put in an HTML select box. The first of these boxes is supposed to contain a 2 character number but can also accept a blank. The formatted strings would look like this:
我有一组接受输入的 html 文本框，当用户单击“添加”按钮时，使用 javascript 来获取文本输入并格式化放置在 HTML 选择框中的字符串。这些框中的第一个应该包含一个 2 个字符的数字，但也可以接受空格。格式化的字符串如下所示：
01-ABC-O 02-DEF-I
However I need a way to display the blank numbers that lines up with the other elements
但是我需要一种方法来显示与其他元素对齐的空白数字
-GHI-O
This type of entry will show up fine when the javascript adds the option, but when the page is reloaded and the select is repopulated with the values (I'm using Java, jsp, and struts 1.1 if that helps) it gets the same values(spaces preserved) but the whitespace is no longer shown in the select control (I've looked at the page source, and it looks identical to when the javascript adds the option). I have tried substituting the spaces for but this just prints the string " " instead of the space. I've also tried using "pre" html blocks and the css white-space property and neither have worked.
当 javascript 添加选项时，这种类型的条目将正常显示，但是当重新加载页面并使用值重新填充选择时（如果有帮助，我使用的是 Java、jsp 和 struts 1.1）它会获得相同的值（保留空格）但空格不再显示在选择控件中（我查看了页面源代码，它看起来与 javascript 添加选项时相同）。我试过用空格代替， 但这只是打印字符串“ ”而不是空格。我也尝试过使用“pre” html 块和 css white-space 属性，但都没有奏效。
Let me know if any further clarification is needed.
如果需要进一步说明，请告诉我。
回答by DaveRandom
You need to replace the spaces with and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.
您需要用 替换空格， 它应该可以工作 - 请注意结束分号（问题中的示例中缺少该分号）！当您通过 Javascript 执行此操作时，大多数（所有？）浏览器都会自动呈现空格，但是当页面加载时空格在那里时，所有（有时除了一个之外的所有）都将被忽略。
You should also apply a font-family:CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.
您还应该将font-family:CSS 属性应用于指定等宽字体的选择，以确保所有内容都正确排列。
回答by Mario
When creating the select option with javascript, to preserve white-space, use "\xa0" - it is a NO-BREAK SPACE char.
使用 javascript 创建选择选项时，要保留空格，请使用 "\xa0" - 它是一个不间断空格字符。
回答by Rontologist
You can use the pre css style on the area that you are outputting the value to.
您可以在要将值输出到的区域上使用 pre css 样式。
<style type="text/css">
#element {
white-space: pre;
}
</style>
<div id="element">
stuff goes here
</div>
This will preserve all whitespace in the div element (other element types will also work) and then you don't need to worry about using the non breaking space.
这将保留 div 元素中的所有空白（其他元素类型也可以使用），然后您无需担心使用非中断空间。
回答by Joakim
Are you going to add it via scripting, you need to use Escape Codes for Space "% A0" which you then decode with unescape ()
您是否要通过脚本添加它，您需要使用空格“% A0”的转义码，然后您使用 unescape () 进行解码
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
回答by jathri
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
Since unescape is deprecated, you may want to use decodeURI:
由于 unescape 已被弃用，您可能需要使用 decodeURI：
logTypeList[i] = new Option(decodeURI(" kent Agent".replace(/ /g, "%C2%A0")), "theValue");
More info at http://www.javascripter.net/faq/mathsymbols.htm
回答by Sushanth CS
You can use the Unicode Character 'SPACE' (U+0020) instead of ("\u0020")
您可以使用 Unicode 字符 'SPACE' (U+0020) 而不是 ("\u0020")
