我将动态行与onChange函数结合使用。第一行是用HTML手动编写的,其他行是用Javascript创建的。
我正在使用count函数在动态行中定义ID。
以下是用HTML手动编写的行的示例:
<div id="asdasd123">
<div id="row_id_1">
<div>
<select id="plusmin1" name="plusmin[]" onChange="getVers1(this.value)" data-srno="1">
<option selected="disabled" value="0"> </option>
<option value="1">Data one</option>
<option value="2">Data two</option>
<option value="3">Data three</option>
</select>
</div>
<div class="form-group">
<input type="text" name="totalprice[]" id="totalprice1" data-srno="1">
</div>
</div>
<script>
function getVers1() {
var numVal1 = Number(document.getElementById('plusmin1').value);
var totalValue = numVal1 * 100
document.getElementById('totalprice1').value = totalValue.toFixed(2);
}
</script>
<input type="text" name="total_item" id="total_item" value="1" />
<button type="button" name="add_row" id="add_row" class="btn btn-success">New row</button>
当您点击add_row脚本时,add`s将使用以下脚本创建新行:
<script>
$(document).ready(function(){
var count = 1;
$(document).on('click', '#add_row', function(){
count++;
$('#total_item').val(count);
var html_code = '';
html_code += '<div id="row_id_'+count+'">';
html_code += '<div><select id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'"><option selected="disabled" value="0"> </option><option value="1">Data one</option><option value="2">Data two</option><option value="3">Data three</option></select></div>';
html_code += '<div class="form-group"><input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'"></div></div>';
$('#asdasd123').append(html_code);
}
});
$(document).on('change', '[id^=plusmin]', function selectQuantity(selectedValue){
var numVal2 = Number(document.getElementById('plusmin'+count+'').value);
var totalValue2 = numVal1 * 100
document.getElementById('totalprice'+count+'').value = totalValue2.toFixed(2);
});
});
</script>
我的脚本中的count
有问题。
当我的屏幕上只有一行并更改plusmin1
的值时,脚本会很好地运行onchange。
当我的屏幕上有两行并更改plusmin2
的值时,脚本也将起作用。但是,当我更改plusmin1
的值时,脚本也会更改totalprice2
。这是我用于第二行的文本框。
有人知道原因吗?为什么当我更改第一行的值时脚本会更改第二个文本框的值?
答案 0 :(得分:0)
主要问题是,您必须将值设置为文本字段 对应于该特定选择。
假设您选择选项为“数据二”,那么它应该仅在相应的文本字段中设置200.00。但您的情况是打算将其设置为尚未添加/创建的文本字段2。
选择(非选项)和文本字段的ID将齐头并进。然后,根据所选选项设置值。
我尝试模拟。请尝试。
<script type="text/javascript">
$(document).ready(function(){
var count = 1;
$(document).on('click', '#add_row', function(){
++count;
$('#total_item').val(count);
var html_code = '<div id="row_id_'+count+'">'+
'<div>' +
'<select class="changePrice" id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'">' +
'<option selected="disabled" value="0"> </option>' +
'<option value="1">Data one</option>' +
'<option value="2">Data two</option>' +
'<option value="3">Data three</option>' +
'</select>' +
'</div>'+
'<div class="form-group">' +
'<input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'">' +
'</div>' +
'</div>';
$('#asdasd123').append(html_code);
});
});
$(document).on('change', '.changePrice', function (){
var optionIndex = $('option:selected',this).attr('value');
var numVal2 = Number(optionIndex);
var totalValue2 = numVal1 * 100;
document.getElementById('totalprice'+optionIndex+'').value = totalValue2.toFixed(2);
});
function updatePrice() {
var numVal1 = Number(document.getElementById('plusmin1 :selected').value);
var totalValue = numVal1 * 100
document.getElementById('totalprice1').value = totalValue.toFixed(2);
}
</script>
$(document).ready(function(){
var count = 1;
$(document).on('click', '#add_row', function(){
++count;
$('#total_item').val(count);
var html_code = '<div id="row_id_'+count+'">'+
'<div>' +
'<select class="changePrice" id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'" updateToBox="'+count+'">' +
'<option selected="disabled" value="0">select</option>' +
'<option value="1">Data one</option>' +
'<option value="2">Data two</option>' +
'<option value="3">Data three</option>' +
'</select>' +
'<input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'">'+
'</div>'+
'</div>';
$('#asdasd123').append(html_code);
});
});
$(document).on('change', '.changePrice', function (){
//alert("clicked : "+$(this).val());
var optionIndex = $(this).val();
var updateToBox = $(this).attr('updateToBox');
var numVal2 = Number(optionIndex);
var totalValue2 = numVal2 * 100;
document.getElementById('totalprice'+updateToBox+'').value = totalValue2.toFixed(2);
});
function getVers1() {
var numVal1 = Number(document.getElementById('plusmin1').value);
var totalValue = numVal1 * 100
document.getElementById('totalprice1').value = totalValue.toFixed(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="asdasd123">
Total fileds <input type="text" name="total_item" id="total_item" value="1" />
<button type="button" name="add_row" id="add_row" class="btn btn-success">New row</button>
<hr/>
<div id="row_id_1">
<div>
<select class="changePrice" id="plusmin0" name="plusmin[]" data-srno="0" updateToBox="0">
<option selected="disabled" value="0">select</option>
<option value="1">Data one</option>
<option value="2">Data two</option>
<option value="3">Data three</option>
</select>
<input type="text" name="totalprice[]" id="totalprice0" data-srno="1">
</div>
</div>