javascript - 根据选择选项填充文本字段
问题描述
当我选择某个选项时,我试图获得“hargaJual”值。但是当我在表格中插入一个新行并选择一个新选项时,它只会更改“Harga”的第一行而将第二行留空。
结果如下:
<td>
<select class="custom-select" id="kodeSparepart" name="kodeSparepart[]">
<option value=""> --Pilih Sparepart-- </option>";
@foreach($sparepart as $s) {
<option value="{{ $s['kodeSparepart'] }}" data-price="{{ $s->hargaJual }}"> {{ $s['namaSparepart'] }} </option>";
}
@endforeach
</select>
</td>
<td>
<input class="form-control" type="text" id="hargaJualTransaksi" name="hargaJualTransaksi[]" autocomplete="off" readonly>
</td>
这是我的 javascript
//for insert new row in table
$(function(){
$('#addMore').on('click', function() {
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
});
$(document).on('click', '#remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>=1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
//fill hargaJualTransaksi field
$(function() {
$('#kodeSparepart').on('change', function(){
var price = $(this).children('option:selected').data('price');
$('#hargaJualTransaksi').val(price);
});
});
解决方案
试试下面的代码:
$("body").on('click', '#kodeSparepart', function (event) {
var price = $(this).children('option:selected').data('price');
$('#hargaJualTransaksi').val(price);
}
推荐阅读
- loops - Labview 时间戳记录
- hibernate - Hibernate:获取计数返回零,尽管有一个获取
- python - Twisted 插件在 Ubuntu 12.04 和 18.04 中有不同的结果
- python - 用相同单词的大小写搜索和替换单词
- angular - 以角度 6 处理 json 对象
- ruby-on-rails - 打开一个新的终端选项卡并在里面运行一个命令,只有在打开选项卡之后
- javascript - 在页面离开时向用户发送邮件
- iis - 如何使用 WMI 代码在服务器上安装 IIS 版本
- javascript - 从 HTML 表中获取 onclick 值以输入表单 JavaScript
- node.js - 访问nodejs项目外的目录和文件