- ベストアンサー
XML,XSL,JavaScriptの連携についての質問
- XML,XSL,JavaScriptの連携について質問があります。XSLでXMLのデータを読み込み、リストボックスを作成して、選択された要素の座標位置を表形式で出力したい。左右のフレームで要素を表示する方法を教えてください。
- XML,XSL,JavaScriptの連携についての質問です。リストボックスで選択された要素の座標位置などを表形式で表示したいと思っていますが、左右のフレームで要素を分けて表示する方法がわかりません。アドバイスをいただけると助かります。
- XML,XSL,JavaScriptの連携についての初歩的な質問です。XMLデータをXSLで解析し、リストボックスを作成して、選択された要素の座標位置を表示する方法を教えてください。左右のフレームで要素を分けて表示する方法についても知りたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
リストボックスの座標位置というのがよくわかりませんが、こんな感じではどうでしょうか？ ・XMLファイル（list.xml） <?xml version="1.0" encoding="utf-8" ?> <data> <item>A</item> <item>B</item> <item>C</item> </data> ・XSLファイル（list.xsl） <?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" encoding="Shift_JIS" indent="yes"/> <!-- 文書全体のテンプレートルール --> <xsl:template match="/"> <html> <script language="javascript" src="select.js"></script> <body onload="SelectList(0);"> <center> <form name="F1"> <xsl:apply-templates select="data" /> </form> </center> </body> </html> </xsl:template> <!-- <data>のテンプレートルール --> <xsl:template match="data"> <select name="S1" OnChange="SelectList(this.selectedIndex);"> <xsl:apply-templates select="item" /> </select> </xsl:template> <!-- <item>のテンプレートルール --> <xsl:template match="item"> <xsl:element name="option"> <xsl:attribute name="value"><xsl:value-of select="." /></xsl:attribute> <xsl:value-of select="." /> </xsl:element> </xsl:template> </xsl:stylesheet> ・フレーム定義htmlファイル（index.html） <frameset cols="50%,50%"> <frame src="left.html" name="left"> <frame src="right.html" name="right"> </frameset> ・フレーム左側htmlファイル（left.html） <script language="JavaScript"> <!-- var XmlFile = "list.xml" ; var XslFile = "list.xsl" ; var xmldoc ; // XML DOM オブジェクト // XMLファイル読込 xmldoc = new ActiveXObject("Microsoft.XMLDOM") ; xmldoc.async = false ; xmldoc.load(XmlFile) ; // XSLファイル読込 xsldoc = new ActiveXObject("Microsoft.XMLDOM") ; xsldoc.async = false ; xsldoc.load(XslFile) ; document.write(xmldoc.transformNode(xsldoc)); //--> </script> ・フレーム右側htmlファイル（right.html） <html> <body> <center> <form name="F2"> <input type="text" name="txtKekka"> </form> </center> </body> <html> ・Javascriptファイル（select.js） function SelectList(p) { parent.right.F2.txtKekka.value = p ; } index.htmlをダブルクリックして起動してみてください
お礼
返答ありがとうございます。 上記、大変参考になりました。引き続き作業を続けたいと思います。 ありがとうございました。