2010-11-25 1 views
2

를 통해 선택 상자 (HTML)에서 옵션을 액세스 할 때 내가 가지고있는 다음 코드 (명확성을 위해 청소 코드) : 내 선택 상자에서 항목을 클릭 할 때누락 된 줄 바꿈 자바 스크립트

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

지금 내가 ' 그러나 텍스트 영역에 줄 바꿈이 나타나기를 원하지만 단순히 나타나지 않습니다. 선택 컨트롤을 채울 때 디버거를 체크하고, 줄 바꿈이 분명히 있습니다 (같은 텍스트의 "title"속성을 사용할 때 툴팁에도 표시됩니다).

JavaScript 코드를 디버그하고 변수 세부 정보 (charCodeAt 사용)에 포함 된 실제 데이터를 보면 "내 텍스트"와 "줄 바꿈"사이에 줄 바꿈이 없음을 볼 수 있습니다. 공백 문자 (코드 32)입니다.

이 문제를 해결할 수있는 사람이 있는지 또는 내 의견으로는 버그가있는 행동을해야합니까? 어쩌면 내가 모르는 뭔가가있어 ...

감사를 사전에 개행 문자를 포함

G.

답변

0

HTML collapses whitespace을.

대신 <br> 개의 요소를 사용할 수 있지만 don't work 개 안에 <option> 개 요소를 사용할 수 있습니다. 그래서, 당신이 달성하기를 원하는 것이 HTML로는 불가능합니다 ...

+0

, 당신을 감사 적어도 지금은 :-) 알고 – Gorgsenegger

0

HTML이 줄 바꿈 문자를 포함하여 공백을 축소 할 때 공백으로 텍스트를 보존하기 위해 옵션 목록에 다른 속성을 추가해야합니다 및 개행 문자

는 exemple :

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