无法选择下拉列表值，选择每个下拉列表后如何显示动态字段? [英] Not able to select the dropdown value and How do I display the dynamic field after selecting each dropdown?
本文介绍了无法选择下拉列表值，选择每个下拉列表后如何显示动态字段?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个名为添加合作伙伴的按钮.当您单击此按钮时，它将显示动态行，如下所示.
I have a button called Add partner. When you click on this button then it will display dynamic row something like this.
显示该行后，我首先单击了Dropbox，然后选择了Bank two.
After displaying the row, I clicked on first select Dropbox and I choose Bank two.
现在请注意，如果我单击添加银行，则第一选择"下拉列表将自动填充第一行选择的值.我的意思是我选择了Bank two，然后将选择Bank two.
Now notice here, If I clicked on add bank then first select dropdown will autofill display with the value of the first-row select. I mean I selected Bank two then Bank two will be selected.
如果我将其从第一行的Bank two更改为Bank three，则它还将在第一个选择下拉列表的第二行中将其更改.例如
If I change it from Bank two to Bank three from the first row then it will also change the in the second row of the first select dropdown. For example
以上情况对于我来说非常有效.没有问题.
This above scenario is working perfectly for me. There is no issue.
现在让我们谈谈这个问题.
如果再次单击Add partner按钮，它将显示ID号为3的新行.类似这样的
Now Let's talk about the issue.
If I click on again Add partner button then it will display the new row with a ID number 3. something like this
现在使用ID 3，我无法从下拉菜单中更改Bank three.我必须在每个ID上执行上述方案.这是我的第一个问题.
Now on ID 3, I am not able to change the Bank three from the dropdown. I have to do the above scenario on each ID. This is my first issue.
我的第二个问题是关于状态下拉列表的.每个选项都有一个不同的字段.我的意思是，如果选择Status one，则将显示一个输入字段.像这样的东西.
My second issue is on the status dropdown. Each option has a different field. I mean, If I select Status one then one input field will display. something like this.
现在，如果用户选择状态，则每次必须显示该字段. 例如.我单击添加银行并选择状态，但它删除了第一句话.
Now Every time I have to display the field if the user selects the status. for example. I clicked on add bank and select the status but it's removing the first remark.
我的预期输出是
让我知道是否需要更多说明.您能帮我解决这个问题吗?
Let me know if need more explanation in this. Would you help me out with this issue?
$(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 上委派的事件是错误的，因为您使用全局选择器而不是本地选择器.例如:
The first: Your delegated event on .pp_fileStatus is wrong because you use global selector instead of local selectors. For instance:
$('.pp_fileStatus').val()
代替:
$(this).val()
第二个问题也遇到相同的问题，但对于 .fileStatus 上的委托事件.新的是:
The second issue suffers the same issue but for the delegated event on .fileStatus. The new one is:
$(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>
这篇关于无法选择下拉列表值，选择每个下拉列表后如何显示动态字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
