87,922
社区成员
发帖
与我相关
我的任务
分享请教如何给动态select赋值，且给其它表项赋值
[{"name": "标砖","cunit": "块","unitprice": "0.8"},{"name": "多孔砖（11孔）","cunit": "块","unitprice": "1.5"},{"name": "地砖","cunit": "块","unitprice": "35"},{"name": "空心砖","cunit": "块","unitprice": "3.5"},{"name": "电脑","cunit": "台","unitprice": "123.45"}]以上是所有商品数据JSON
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function addItem() {
var n = $('#option_list').find('input[name]').length/5+1;
var newOption = '<div class="mbline">材料名称：<select id="pro_name_'+n+'" name="product['+n+'][name]" onChange="javascript:change_item('+n+');"><option value="">* 请选择</option></select> 单位：<input type="text" id="pro_unit_'+n+'" name="product['+n+'][cunit]"> 单价：<input type="text" id="pro_price_'+n+'" name="product['+n+'][price]"> 元 数量：<input type="text" id="pro_num_'+n+'" name="product['+n+'][num]"> 金额：<input type="text" readonly id="pro_summoney_'+n+'" name="product['+n+'][summoney]">元 备注：<input type="text" id="product['+n+'][comment]" name="product['+n+'][comment]"></div>';
if(n<6){
$('#option_list').append(newOption);
}else{
alert('最多允许添加5行！');
}
}
function delItem(a) {
$(a).parent().remove();
}
$(document).ready(function () {
$.getJSON('index.php?m=Public&a=JsonNode',function(data) {
$(data).each(function(i) {
$("#pro_name_1").append($("<option/>").text(this.name).attr("value",this.name));
});
});
});
function change_item(node) {
if( $("#pro_name_"+node).val() ) {
$.getJSON("index.php?m=Public&a=JsonNodeinfo&ccname="+$("#pro_name_"+node).val(),function(result) {
$("#pro_unit_"+node).val(result.cdata[0].value);
});
}else{
//清空
$("#pro_unit_"+node).val('');
$("#pro_price_"+node).val('');
$("#pro_num_"+node).val('');
}
}
</script>
</head>
<body>
<table width="100%" >
<tr>
<th width="160"><strong>材料信息：</strong><a href="javascript:addItem()" title="添加行"><span style="color:blue;" >++增加行</span></a></th>
<th>
<div id="option_list">
<div class="mbline">
材料名称：<select name="product[1][name]" id="pro_name_1" onChange="javascript:change_item(1);"><option value="">* 请选择</option></select>
单位：<input type="text" name="product[1][cunit]" id="pro_unit_1">
单价：<input type="text" id="pro_price_1" name="product[1][price]"> 元
数量：<input type="text" id="pro_num_1" name="product[1][num]">
金额：<input type="text" readonly id="pro_summoney_1" name="product[1][summoney]">元
备注：<input type="text" id="product[1][comment]" name="product[1][comment]">
</div>
</div>
</th>
</tr>
</table>
</body>
</html>
现向各位老师请教，如何给动态的材料名称赋值（即：商品数据JSON），且当有选择操作时，给其后面对应的单位、单价赋值，谢谢了
...全文
请发表友善的回复…
发表回复
uczone 2014-07-06
- 打赏
- 举报
不好意思，刚才复制的时候多了很多空格，将多余空格删除后就解决了
uczone 2014-07-06
- 打赏
- 举报
非常感谢showbo版主的回答，我将代码复制到本地，双击运行时提示： SyntaxError: unterminated string literal 又该如何解决呢，谢谢
Go 旅城通票 2014-07-06
- 打赏
- 举报
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function addItem() {
var n = $('#option_list').find('input[name]').length/5+1;
var newOption = '<div class="mbline">材料名称：<select id="pro_name_'+n+'" name="product['+n+'][name]" onChange="javascript:change_item('+n+',this);"><option value="">* 请
选择</option>'+htmlopt+'</select> 单位：<input type="text" id="pro_unit_'+n+'" name="product['+n+'][cunit]"> 单价：<input type="text"
id="pro_price_'+n+'" name="product['+n+'][price]"> 元 数量：<input type="text" id="pro_num_'+n+'" name="product['+n+'][num]"> 金额：<input
type="text" readonly id="pro_summoney_'+n+'" name="product['+n+'][summoney]">元 备注：<input type="text" id="product['+n+'][comment]" name="product['+n+']
[comment]"></div>';
if(n<6){
$('#option_list').append(newOption);
}else{
alert('最多允许添加5行！');
}
}
function delItem(a) {
$(a).parent().remove();
}
var htmlopt=''////////用来存储select的option
$(document).ready(function () {
var data=[{"name": "标砖","cunit": "块","unitprice": "0.8"},{"name": "多孔砖（11孔）","cunit": "块","unitprice": "1.5"},{"name": "地砖","cunit": "块","unitprice": "35"},{"name": "空心砖","cunit":
"块","unitprice": "3.5"},{"name": "电脑","cunit": "台","unitprice": "123.45"}];
htmlopt=$(data).map(function(){return '<option value="'+this.name+'" cunit="'+this.cunit+'" unitprice="'+this.unitprice+'">'+this.name+'</option>';}).get().join('')
$("#pro_name_1").append(htmlopt)
/*$.getJSON('index.php?m=Public&a=JsonNode',function(data) {
$(data).each(function(i) {
$("#pro_name_1").append($("<option/>").text(this.name).attr("value",this.name));
});
});*/
});
function change_item(node,sel) {
var opt=$(sel.options[sel.selectedIndex])
$("#pro_unit_"+node).val(opt.attr('cunit'));
$("#pro_price_"+node).val(opt.attr('unitprice'));
//$("#pro_num_"+node).val('');
/*
if( $("#pro_name_"+node).val() ) {
$.getJSON("index.php?m=Public&a=JsonNodeinfo&ccname="+$("#pro_name_"+node).val(),function(result) {
$("#pro_unit_"+node).val(result.cdata[0].value);
});
}else{
//清空
$("#pro_unit_"+node).val('');
$("#pro_price_"+node).val('');
$("#pro_num_"+node).val('');
}*/
}
</script>
</head>
<body>
<table width="100%" >
<tr>
<th width="160"><strong>材料信息：</strong><a href="javascript:addItem()" title="添加行"><span style="color:blue;" >++增加行</span></a></th>
<th>
<div id="option_list">
<div class="mbline">
材料名称：<select name="product[1][name]" id="pro_name_1" onChange="javascript:change_item(1,this);"><option value="">* 请选择</option></select>
单位：<input type="text" name="product[1][cunit]" id="pro_unit_1">
单价：<input type="text" id="pro_price_1" name="product[1][price]"> 元
数量：<input type="text" id="pro_num_1" name="product[1][num]">
金额：<input type="text" readonly id="pro_summoney_1" name="product[1][summoney]">元
备注：<input type="text" id="product[1][comment]" name="product[1][comment]">
</div>
</div>
</th>
</tr>
</table>
</body>
</html>
