- PR -

XSLでセレクトされた連動するセレクトボックス

1
投稿者投稿内容
ncl
会議室デビュー日: 2006/01/18
投稿数: 1
投稿日時: 2006-01-18 20:25
初めての書き込みです。
どうか宜しくお願いします。

２つの連動型セレクトボックスをjava scriptとXML,XSLを使って、作りたいのですが、つまづいております。


例：左のセレクトボックスでToolsが選ばれたら、
右のセレクトボックスの中身がAとBだけが候補となるもの。

javascript のarray が固定のもののサンプルしか見つからず。
Javascriptの中にXSLのパラメーターを使った例も見つけることができませんでした。

XML
----------------------------
<menu>

<column head="Tools">

<category menu="Tools">
<name>A</name>
<link>AA</link>
</category>

<category menu="Tools">
<name>B</name>
<link>BBB</link>
</category>
</column>

<column head="Resources">
<category menu="Resources">
<name>C</name>
<link>CCCC</link>
</category>

<category menu="Resources">
<name>D</name>
<link>DDDDD</link>
</category>

<category menu="Resources">
<name>E</name>
<link>EEEEEE</link>
</category>

.XSL
-----------------------------------------------
<form method='POST' name='Form1'>
<tr>
<td rowspan="2" valign="top">
<xsl:call-template name="menu"/>
<!--1つ目のセレクトボックス****-->
</td>
<td valign="top"><input type="button" value="Add New Menu" name="newMenu" style="width:140; height=30" onclick="showDiv('A1')" />
<br/>
<br/>
<input type="button" value="Edit Menu" name="newMenu" onclick="edit('RightTable')" style="width:140; height=30" />
<br/>
<br/>
<input type="submit" value="Delete Menu" name="DeleteMenu" style="width:140; height=30" /></td>
<td rowspan="2" width="20%" valign="top">
<select name="SHOPID">
　　　　　<!--2つ目のセレクトぼっクス-->
<option>--Menu Item--</option>
</select>
</td>
<td valign="top"><input type="button" value="Add New Menu Item" name="newMenuItem" onclick="return SendAddItem();" style="width:140; height=30" />
<br/>
<input type="button" value="Delete Item Menu" name="DeleteItemMenu" style="width:140; height=30" />
</td></tr></form>


<xsl:template match="menu" name="menu">
<select name="selectmenu" onchange="listChange(this.form);">
<option value="">--Menu--</option>
<xsl:for-each select=".//@head">
<option value="{.}"> <xsl:value-of select="." /> </option>
</xsl:for-each>
</select>
</xsl:template>


★★★★PROBLEM ( ★★★★

Javascript
---------------------------
<script language="javascript" type="text/javascript">
<![CDATA[

datBox = new Array(
new Array(new Array("0199901", "A1")),
new Array(new Array("0200101", "B1"), new Array("0200401", "B2"), new Array("0200601", "B3")),
new Array(new Array("0300701", "C1"), new Array("0300901", "C2"))
);
function listChange(frm) {
frm.SHOPID.length = 1;
var y = frm.selectmenu.selectedIndex - 1;
if (y != -1)
for (var z = 0; z < datBox[y].length; z++)
frm.SHOPID.options[z+1] = new Option(datBox[y][z][1], datBox[y][z][0]);
}
]]>
</script>


やりたいこと：
array の中身をセレクトした結果を挿入するためにはどうすればいいのでしょうか？？

非常に分かりにくい説明で申し訳ございませんが、
ご存知の方、もしくはサンプルページを知っている方はご教授願います。

宜しくお願いします。
MMX
ぬし
会議室デビュー日: 2001/10/26
投稿数: 861
投稿日時: 2006-01-19 12:21
部分変更ですから、xslt の再適用でなく、Javascript DOM(HTML) で書き換えでは？
OPTION要素をXMLで書き換える
http://allabout.co.jp/career/javascript/closeup/CU20051015A/

[ メッセージ編集済み 編集者: MMX 編集日時 2006-01-19 13:37 ]
1

スキルアップ／キャリアアップ（JOB@IT）