问题描述
我正在尝试使用Javascript来使用动态字段，直到通过class="tail-select" 和data-search="True" 使用插件“ Tail Select”，IM才能正常工作。使用插件使下一个添加的字段不起作用，
在JSFiddle上编辑代码：https://jsfiddle.net/wc6r53on/4/
或以下：
<!DOCTYPE html>
<html lang="en" class="light">
<!-- BEGIN: Head -->
<head>
<!-- <link rel="stylesheet" href="dist/css/app.css" />-->
<link rel="stylesheet" href="https://midone.left4code.com/dist/css/app.css"/>
<!-- END: CSS Assets-->
</head>
<!-- END: Head -->
<body class="app">
<!-- BEGIN: Content -->
<div class="content">
<!-- BEGIN: Top Bar -->
<div class="top-bar">
<!-- BEGIN: Breadcrumb -->
<div class="-intro-x breadcrumb mr-auto hidden sm:flex"> <a href="" class="">Application</a> <i data-feather="chevron-right" class="breadcrumb__icon"></i> <a href="" class="breadcrumb--active">Register</a> </div>
<!-- END: Breadcrumb -->
</div>
<!-- END: Top Bar -->
<h2 class="intro-y text-lg font-medium mt-10">
Input User
</h2>
<div class="grid grid-cols-12 gap-6 mt-5">
<div class="intro-y col-span-12 lg:col-span-6">
<form class="form-horizontal" autocomplete="off" action="" method="POST">
<input type="hidden" name="csrfmiddlewaretoken" value="BfIP60zSCy7hJdSxQ2JEXOP03m7DoF2NoZ5Bbssii0kW8bQ2jEeICxavWmT8uv5y">
<!-- BEGIN: Form Layout -->
<div class="intro-y box p-5">
<input type="hidden" name="form-TOTAL_FORMS" value="1" id="id_form-TOTAL_FORMS"><input type="hidden" name="form-INITIAL_FORMS" value="0" id="id_form-INITIAL_FORMS"><input type="hidden" name="form-MIN_NUM_FORMS" value="0" id="id_form-MIN_NUM_FORMS"><input type="hidden" name="form-MAX_NUM_FORMS" value="1000" id="id_form-MAX_NUM_FORMS">
<div class="mt-3 form-row">
<tr>
<th><label for="id_form-0-item">Item:</label></th>
<td>
<select name="form-0-item" class="tail-select w-full" data-search="True" id="id_form-0-item">
<option value="" selected>---------</option>
<option value="2">Cream 1</option>
<option value="3">Cream 2</option>
<option value="4">Cream 3</option>
</select>
</td>
</tr>
</div>
<br>
<div class="input-group-append">
<button class="button w-24 bg-theme-1 text-white add-form-row">Add More</button>
</div>
<div class="text-right mt-5">
<button type="submit" class="button w-24 bg-theme-1 text-white">Save</button>
</div>
</form>
</div>
</div>
<!-- END: Form Layout -->
</div>
</div>
</div>
<!-- END: Content -->
<script src="https://midone.left4code.com/dist/js/app.js"></script>
<script type="text/javascript" class="init">
$(document).ready( function () {$('#responsive-datatable').DataTable();
});
<!-- Dynamic Field Function -->
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript">
function updateElementIndex(el,prefix,ndx) {
var id_regex = new RegExp('(' + prefix + '-\\d+)');
var replacement = prefix + '-' + ndx;
if ($(el).attr("for")) $(el).attr("for",$(el).attr("for").replace(id_regex,replacement));
if (el.id) el.id = el.id.replace(id_regex,replacement);
if (el.name) el.name = el.name.replace(id_regex,replacement);
}
function cloneMore(selector,prefix) {
var newElement = $(selector).clone(true);
var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
var name = $(this).attr('name')
if(name) {
name = name.replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name': name,'id': id}).val('').removeAttr('checked');
}
});
newElement.find('label').each(function() {
var forValue = $(this).attr('for');
if (forValue) {
forValue = forValue.replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr({'for': forValue});
}
});
total++;
$('#id_' + prefix + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
var conditionRow = $('.form-row:not(:last)');
conditionRow.find('.btn.add-form-row')
.removeClass('btn-success').addClass('btn-danger')
.removeClass('add-form-row').addClass('remove-form-row')
.html('-');
return false;
}
function deleteForm(prefix,btn) {
var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
if (total > 1){
btn.closest('.form-row').remove();
var forms = $('.form-row');
$('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
for (var i=0,formCount=forms.length; i<formCount; i++) {
$(forms.get(i)).find(':input').each(function() {
updateElementIndex(this,i);
});
}
}
return false;
}
$(document).on('click','.add-form-row',function(e){
e.preventDefault();
cloneMore('.form-row:last','form');
return false;
});
$(document).on('click','.remove-form-row',function(e){
e.preventDefault();
deleteForm('form',$(this));
return false;
});
</script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...