2010-11-25 15 views
2

を経由して選択ボックス(HTML)からオプションにアクセスするとき、私持って、次のコード(わかりやすくするために清掃コード):私は私の選択ボックス内の項目をクリックすると不足している改行はJavaScript

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

は、今私は」テキスト区切りに改行を入れるのが好きですが、単に表示されません。私は、デバッガをチェックインしたときに、選択コントロールを挿入し、改行が確実に表示されます(同じテキストで "タイトル"プロパティを使用すると、ツールチップにも表示されます)。

JavaScriptコードをデバッグし、変数の詳細(charCodeAtを使用)に含まれる実際のデータを見ると、「My Text」と「改行がある」の間に改行がないことがわかりますスペース文字(コード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> 
関連する問題