[英]Not able to select the dropdown value and How do I display the dynamic field after selecting each dropdown?
我有一個名為添加合作伙伴的按鈕。 當您單擊此按鈕時,它將顯示類似這樣的動態行。
顯示行之后,我首先單擊選擇Dropbox,然后選擇Bank two
。
現在注意這里,如果我單擊添加銀行,那么“第一選擇”下拉列表將自動填充第一行選擇的值。 我的意思是我選擇了第二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上的委托事件是錯誤的,因為您使用全局選擇器而不是本地選擇器。 例如:
$('.pp_fileStatus').val()
代替:
$(this).val()
除了.fileStatus上的委托事件外,第二個問題也遇到同樣的問題。 新的是:
$(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.