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

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

line-breaks option select html javascript

Gorgsenegger · 技术社区 · 15 年前

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

    <!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 回复 | 直到 15 年前

Community Mohan Dere 9 年前

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

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

Mouadh 15 年前

当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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前