代码之家 › 专栏 › 技术社区 › Gorgsenegger

通过JavaScript从选择框(html)访问选项时缺少换行符

line-breaks option select html javascript

Gorgsenegger · 技术社区 · 14 年前

我有以下代码(为了清晰起见,已清除代码):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
            function updateTextBox()
            {
                var lstSource = document.getElementById("lstSource");
                var details = lstSource[lstSource.selectedIndex].text;
                document.getElementById("txtDetails").value = details;
            }
        </script>
    </head>
    <body>
        <select id="lstSource" onChange="updateTextBox();">
            <option value="26">My Text

has a line break!</option>
        </select>
        <textarea id="txtDetails"></textarea>
    </body>

    </html>

现在,当我在我的选择框中单击一个项目时,我想让换行符出现在文本区域中,但是,它们根本不会出现。当填充select控件时,我已经签入了调试器,并且断行符肯定在那里(当我使用相同文本的“title”属性时,它们也会显示在工具提示中)。

当我调试JavaScript代码并查看包含在变量详细信息中的实际数据(使用charCodeAt)时,我可以看到没有换行符,即“我的文本”和“有换行符”之间只有一个空格字符(代码32)。

有人知道这是可以解决的,还是我必须忍受这种(在我看来)小车行为?也许我错过了什么。。。

提前谢谢

G。

2 回复 | 直到 14 年前

Community CDub 7 年前

HTML格式 collapses whitespace ,包括换行符。

你可以用 <br> 取而代之的是元素,但它们 don't work 里面 <option> 元素。所以,我担心你想用HTML实现什么是不可能的。。。

Mouadh 14 年前

当HTML折叠空白(包括换行符)时,您必须创建另一个选项列表中的属性,用空格和换行符保留文本

示例:

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <script type="text/javascript"> 
            function updateTextBox() 
            { 
                var lstSource = document.getElementById("lstSource"); 
                var details = lstSource[lstSource.selectedIndex].tmpText; 
                document.getElementById("txtDetails").value = details; 
            } 
            function onLoad() 
            { 
                var lstSource = document.getElementById("lstSource");
                var text = "Test +\n ";
                for(var i=0;i<lstSource.options.length;i++)
                {
                    lstSource.options[i].text = text +i;
                    lstSource.options[i].tmpText = text +i;
                }                
            } 
        </script> 
    </head> 
    <body onload="onLoad()" > 
        <select id="lstSource" onChange="updateTextBox();"> 
            <option></option>
            <option></option> 
            <option></option>
            <option></option> 
            <option></option>
            <option></option> 
        </select> 
        <textarea id="txtDetails" ></textarea> 
    </body> 

    </html>