我有一个名为“添加合作伙伴”的按钮。当您单击此按钮时,它将显示类似这样的动态行。
显示该行后,我首先点击选择 Dropbox,然后选择 Bank two
。
现在请注意,如果我点击添加银行,那么第一个选择下拉列表将自动填充显示第一行选择的值。我的意思是我选择了 Bank two
然后 Bank two
将被选中。
如果我将它从第一行的 Bank two
更改为 Bank three
那么它也会更改第一个选择下拉列表的第二行。例如
上述场景对我来说非常有效。没有问题。
现在让我们谈谈这个问题。
如果我再次单击 Add partner
按钮,它将显示 ID 号为 3 的新行。类似这样
现在在 ID 3 上,我无法从下拉列表中更改 Bank three
。我必须对每个 ID 执行上述场景。这是我的第一期。
我的第二个问题是状态下拉列表。每个选项都有不同的字段。我的意思是,如果我选择 Status one
,那么将显示一个输入字段。像这样。
现在,如果用户选择状态,我每次都必须显示该字段。 例如。我点击添加银行并选择状态,但它删除了第一条评论。
我的预期输出是
让我知道是否需要更多解释。你能帮我解决这个问题吗?
$(document).on('change', '.fileStatus', function() {
var fileStatus = $('.fileStatus option:selected').val();
$('.fileStatus').val(fileStatus);
})
$(document).ready(function() {
// $('.fileStatus').on('change', '.fileStatus', function(){
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".dynamicform"); //Fields wrapper
var add_button = $(".click_partner"); //Add button ID
var x = 1; //initlal text box count
a = 1;
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
a++;
//$("input[id^=medication_name]").focus();
$(wrapper).append('<div class="clearfix"></div><div class=" custom_fields medication_info" data-id="' + inner(a, 2) + '"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="label" id="unique">ID ' + x + ':</div></div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + inner(a, 2) + '" class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bank two</option><option value="3">Bank three</option></select></div> </div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><a href="#" class="new_add_bank bankLink" id="' + x + '">Add Bank</a> <div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank Three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div> <div class="i-imgset remove_field"><img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).find('.click_partner').closest('.custom_fields').remove();
x++;
});
$(wrapper).on('click', '.new_add_bank', function() {
var innercoutner = $(this).closest('.medication_info').find('.medication_info').children('.row').length + 1;
var c = $(this).closest('.medication_info').attr('data-id');
var fileStatus = $('.fileStatus:last option:selected').val();
// alert(fileStatus);
$(this).closest('.row').append('<div class="clearfix"></div><div class=" medication_info"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "></div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + c + '-' + inner(innercoutner, 2) + '" class="form-control"></div></div><div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bnak two</option><option value="3">Bank three</option></select></div> </div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div><div class="i-imgset remove_field"> <img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
$('.fileStatus:last').val(fileStatus);
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).closest('.medication_info').remove();
x--;
});
// increment==============================================
function inner(k, width, t) {
t = t || '0';
k = k + '';
/*
return n.length >= ? n : new Array(w widthidth - n.length + 1).join(z) + n; */
return k.length >= width ? k : new Array(width - k.length + 1).join(t) + k;
}
});
$(document).on('change', '.pp_fileStatus', function(event) {
//alert($(this).val());
$(".input-wrapper").remove();
if (($('.pp_fileStatus').val() == '1')) {
$(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]" class="form-control"></div></div>');
} else if (($('.pp_fileStatus').val() == '2')) {
$(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]" class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]" class="form-control"></div></div>');
} else {
$(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Time</label><input type="text" name="time[]" class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Reason</label><input type="text" name="reason[]" class="form-control"></div></div>');
}
});
.i-imgset {
width: 30px;
}
.i-imgset img {
width: 100%;
}
.bankLink {
position: absolute;
top: -24px;
font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="click_partner"> <input type="button" name="parner" value="Add Partner"></div>
<div class="dynamicform">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
最佳答案
您有两个主要问题。
第一个:您在 .pp_fileStatus 上的委托(delegate)事件是错误的,因为您使用的是全局选择器而不是本地选择器。例如:
$('.pp_fileStatus').val()
代替:
$(this).val()
第二个问题遇到同样的问题,但针对 .fileStatus 上的委托(delegate)事件。新的是:
$(document).on('change', '.fileStatus', function() {
var fileStatus = $(this).find('option:selected').val();
$(this).closest('.row').find('.medication_info .fileStatus').val(fileStatus);
})
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".dynamicform"); //Fields wrapper
var add_button = $(".click_partner"); //Add button ID
var x = 1; //initlal text box count
a = 1;
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
a++;
//$("input[id^=medication_name]").focus();
$(wrapper).append('<div class="clearfix"></div><div class=" custom_fields medication_info" data-id="' + inner(a, 2) + '"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="label" id="unique">ID ' + x + ':</div></div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + inner(a, 2) + '" class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bank two</option><option value="3">Bank three</option></select></div> </div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><a href="#" class="new_add_bank bankLink" id="' + x + '">Add Bank</a> <div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank Three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div> <div class="i-imgset remove_field"><img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).find('.click_partner').closest('.custom_fields').remove();
x++;
});
$(wrapper).on('click', '.new_add_bank', function() {
var innercoutner = $(this).closest('.medication_info').find('.medication_info').children('.row').length + 1;
var c = $(this).closest('.medication_info').attr('data-id');
var fileStatus = $('.fileStatus:last option:selected').val();
// alert(fileStatus);
$(this).closest('.row').append('<div class="clearfix"></div><div class=" medication_info"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "></div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + c + '-' + inner(innercoutner, 2) + '" class="form-control"></div></div><div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bnak two</option><option value="3">Bank three</option></select></div> </div> <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div><div class="i-imgset remove_field"> <img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
$('.fileStatus:last').val(fileStatus);
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).closest('.medication_info').remove();
x--;
});
// increment==============================================
function inner(k, width, t) {
t = t || '0';
k = k + '';
/*
return n.length >= ? n : new Array(w widthidth - n.length + 1).join(z) + n; */
return k.length >= width ? k : new Array(width - k.length + 1).join(t) + k;
}
$(document).on('change', '.fileStatus', function() {
var fileStatus = $(this).find('option:selected').val();
$(this).closest('.row').find('.medication_info .fileStatus').val(fileStatus);
})
$(document).on('change', '.pp_fileStatus', function(event) {
//alert($(this).val());
var operation = 'append';
var ele = $(this).closest('.row');
if ($(this).closest('.row').find('.medication_info').length != 0) {
operation = 'after';
ele = ele.find('.i-imgset:first');
ele.siblings(".input-wrapper").remove();
} else {
ele.find(".input-wrapper").remove();
}
if ($(this).val() == '1') {
ele[operation]('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]" class="form-control"></div></div>');
} else if ($(this).val() == '2') {
ele[operation]('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]" class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]" class="form-control"></div></div>');
} else {
ele[operation]('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Time</label><input type="text" name="time[]" class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Reason</label><input type="text" name="reason[]" class="form-control"></div></div>');
}
});
.i-imgset {
width: 30px;
}
.i-imgset img {
width: 100%;
}
.bankLink {
position: absolute;
top: -24px;
font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<div class="container">
<div class="click_partner"> <input type="button" name="parner" value="Add Partner"></div>
<div class="dynamicform">
</div>
</div>
关于javascript - 无法选择下拉值以及如何在选择每个下拉列表后显示动态字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56820515/