Javascript 选择期权时拆分价值和追加价格

当有人选择选项时，我想将var total追加到

10

<select name="item-select"  id="item-select" onchange="price(this)">
<option  selected>Choose an item</option>
<option value="1|100|4.5" >item 1</option>
<option value="2|100|5.5" >item 2</option>
<option value="3|100|6.5" >item 3</option>
</select>
<select name="quantity"  id="quantity" onchange="price(this)">
<option  selected>quantity</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>

<div>your price is <p style="display:inline-block" id="total">10</p> $</div>

js小提琴

尝试以下方法：

//更改数量选择框时
$（“#数量，#项目选择”）。关于（“更改”，函数（）{
var q=$（'#数量'）.val（）；
变量e=$（'#项目选择'）.val（）；
var splitted=e.split（“|”）；
var价格=浮动（拆分[1]）；
控制台日志（价格）；
var gram=parseFloat（拆分[2]）；
控制台日志（克）；
var总额=q*克+价格；
//展示
$（“#总计”）.html（总计）；
});

选择一个项目
项目1
项目2
项目3
量
1.
2.
3.
您的价格是
10
$
试试这个：


var calculatePrice=function（）{
var q=$（'#数量'）.val（）；
变量e=$（'#项目选择'）.val（）；
if（$（'#项选择'）.val（）==null）{
返回0；
}
如果（$（'#数量'）.val（）==null）{
q=1；
}
var splitted=e.split（“|”）；
var价格=浮动（拆分[1]）；
var gram=parseFloat（拆分[2]）；
var总额=q*克+价格；
返回总数；
}
$（“#项目选择，#数量”）.change（函数（）{
$（“#total”）.html（calculatePrice（））；
});

选择一个项目
项目1
项目2
项目3
量
1.
2.
3.
您的价格是
10
$
可以正常工作，但当您单击项目1和数量1时，，，然后更改为项目3，价格未更新，仍然与项目ONOW检查相同，只需将更改事件添加到
项目选择
。