javascript - jQuery - 如何通过动态表中的文本框显示下拉选择的值
问题描述
我创建了动态表,我想在文本框中显示选定的下拉值,我尝试了很多使用 javascripts 和 jQuery 的方法,但它在我的动态表中不起作用..
我只想在我的文本框中传递值
你能帮我吗?
注意:仅传递值表下拉列表..
这是我详细的小提琴
用于创建动态表的jQuery代码
$(document).ready(function() {
$("#cashacc_sel").html($('#cashacc').html());
var i = 1;
$("#add_row").click(function() {
var oSelectedValue = $('#cashacc').val();
$('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Choose an items</option></select></td>");
// {/* <td>" + (i + 1) + "</td> */}
$("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
// $('#cashacc_sel').append($('#dynamic_sel').html());
$("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)'));
$("#cashacc").html($('#cashacc_sel').html());
$("#cashacc").val(oSelectedValue);
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 20px;">
<label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
<select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an items</option>
<option value="acc1">Account 1</option>
<option value="acc2">Account 2</option>
<option value="acc3">Account 3</option>
</select>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
</tr>
</thead>
<tbody>
<a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
<tr id='addr0'>
<td>
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
</td>
<td>
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Select A/c name</option>
<option value="1">Plumz</option>
<option value="2">Plumz 2</option>
<option value="3">Plumz 3</option>
</select>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
</div>
解决方案
您需要使用克隆而不是 ID
$(function() { // on page load
$("#add_row").on("click",function() { // on click of add
$("tbody").append($("tbody tr").first().clone()); // clone and append
$("tbody tr").last().find("select").val($("#cashacc").val()); // set the value
});
$("#delete_row").on("click",function() {
if ($("tbody tr").length > 1) { // remove last entry if more than one
$("tbody tr").last().remove()
}
});
// copy the value from select to input field
$("tbody").on("change","[name=cashacc_sel]",function() {
$(this).closest("tr").find("[name=cashacc_code]").val(this.value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 20px;">
<label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
<select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an item</option>
<option value="acc1">Account 1</option>
<option value="acc2">Account 2</option>
<option value="acc3">Account 3</option>
</select>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<td><a id="add_row" class="btn btn-default pull-left adRow">Add Row</a></td>
<td><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a></td>
</tr>
<tr style="background-color: #680779; color: #fff;">
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
</td>
<td>
<select class="form-control" name="cashacc_sel">
<option value="">Select A/c name</option>
<option value="acc1">Plumz</option>
<option value="acc2">Plumz 2</option>
<option value="acc3">Plumz 3</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
推荐阅读
- message-queue - Azure 服务总线:清除死信队列中超过一天的消息
- docusignapi - 重定向到docusign中准备好的模板
- loopback - 如何在 Loopback 4 中重新创建“dist”文件夹
- python-3.x - python multiprocessing.pool() OSError: [Errno 22] 无效参数
- c# - 在 WPF XAML 中绑定和呈现 Visual 属性
- python - Python3.7 ImportError:没有名为“django”的模块
- javascript - net::ERR_FAILED 对所有外部请求
- css - Bootstrap Carousel Image Slider 无法在 React 中滑动
- javascript - Javascript 私有方法和属性
- javascript - 如何将这个级联下拉选择从 Class 转换为 React 中的功能挂钩?