该博客展示了一段利用JavaScript和XML实现商品信息选择的代码。通过选择品名规格，动态更新单位选项和价格信息。代码中定义了change函数处理选择事件，从XML数据中获取对应信息并更新页面元素，实现了商品信息的交互展示。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>清风</title>
<script>
var obj;
function change(prime,slave,price)
{
var obj=document.all.xmldata.XMLDocument.childNodes[0].selectSingleNode("DSTree1[@id=/""+prime.value+"/"]");
with(slave){
var length=0;
for(i=0;i<obj.childNodes.length;i++)//获得子节点数据
{
options[length++].text=obj.childNodes[i].getAttribute("text");
options[length-1].value=obj.childNodes[i].getAttribute("id");
price.value=obj.childNodes[i].getAttribute("price_buy");
}
οnchange=function()//添加控件事件方法
{
price.value=obj.selectSingleNode("DSTree2[@id=/""+slave.value+"/"]").getAttribute("price_buy");
};
options[length-1].selected;//设置默认值
onchange();//触发事件
}
}
</script>
</head>
<body class="style5">
<table>
<tr><td>
品名规格：
<select id="prime" οnchange="javascript:change(this,document.all('slave'),document.all('price'))">
<option value="0">请选择</option>
<option value="11">豆芽</option>
<option value="10">对虾</option>
<option value="9">鲤鱼</option>
</select>
单位：
<select id="slave">
<option value="0">请选择</option>
</select>
价格：
<input type="text" value="" name="price">
</td></tr>
</table>
</body>
</html>
<!--选择数据开始-->
<xml id=xmldata><DSTreeRoot name="root" treeId="123" id="-1">
<DSTree1 text="请选择" id="0">
<DSTree2 text="请选择" price_buy="0.0" id="0"/>
</DSTree1>
<DSTree1 text="豆芽" id="11">
<DSTree2 text="袋" id="1" rate="0.0" barcode="ttt" price_buy="1.5" price_sale="3.5" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
<DSTree2 text="件" id="2" rate="0.1" barcode="ttt" price_buy="2.0" price_sale="4.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="0"/>
<DSTree2 text="个" id="3" rate="0.0" barcode="ttt" price_buy="3.0" price_sale="5.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="0"/>
</DSTree1>
<DSTree1 text="对虾" id="10">
<DSTree2 text="辆" id="4" rate="0.0" barcode="ttt" price_buy="4.0" price_sale="6.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
</DSTree1>
<DSTree1 text="鲤鱼" id="9">
<DSTree2 text="瓶" id="5" rate="0.0" barcode="ttt" price_buy="5.0" price_sale="7.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
</DSTree1>
</DSTreeRoot>
</xml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>清风</title>
<script>
var obj;
function change(prime,slave,price)
{
var obj=document.all.xmldata.XMLDocument.childNodes[0].selectSingleNode("DSTree1[@id=/""+prime.value+"/"]");
with(slave){
var length=0;
for(i=0;i<obj.childNodes.length;i++)//获得子节点数据
{
options[length++].text=obj.childNodes[i].getAttribute("text");
options[length-1].value=obj.childNodes[i].getAttribute("id");
price.value=obj.childNodes[i].getAttribute("price_buy");
}
οnchange=function()//添加控件事件方法
{
price.value=obj.selectSingleNode("DSTree2[@id=/""+slave.value+"/"]").getAttribute("price_buy");
};
options[length-1].selected;//设置默认值
onchange();//触发事件
}
}
</script>
</head>
<body class="style5">
<table>
<tr><td>
品名规格：
<select id="prime" οnchange="javascript:change(this,document.all('slave'),document.all('price'))">
<option value="0">请选择</option>
<option value="11">豆芽</option>
<option value="10">对虾</option>
<option value="9">鲤鱼</option>
</select>
单位：
<select id="slave">
<option value="0">请选择</option>
</select>
价格：
<input type="text" value="" name="price">
</td></tr>
</table>
</body>
</html>
<!--选择数据开始-->
<xml id=xmldata><DSTreeRoot name="root" treeId="123" id="-1">
<DSTree1 text="请选择" id="0">
<DSTree2 text="请选择" price_buy="0.0" id="0"/>
</DSTree1>
<DSTree1 text="豆芽" id="11">
<DSTree2 text="袋" id="1" rate="0.0" barcode="ttt" price_buy="1.5" price_sale="3.5" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
<DSTree2 text="件" id="2" rate="0.1" barcode="ttt" price_buy="2.0" price_sale="4.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="0"/>
<DSTree2 text="个" id="3" rate="0.0" barcode="ttt" price_buy="3.0" price_sale="5.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="0"/>
</DSTree1>
<DSTree1 text="对虾" id="10">
<DSTree2 text="辆" id="4" rate="0.0" barcode="ttt" price_buy="4.0" price_sale="6.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
</DSTree1>
<DSTree1 text="鲤鱼" id="9">
<DSTree2 text="瓶" id="5" rate="0.0" barcode="ttt" price_buy="5.0" price_sale="7.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
</DSTree1>
</DSTreeRoot>
</xml>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
