如何给新添加的动态select框添加select2功能
How to add select2 function to newly added dynamic select box
我正在尝试以 Html 形式实现 select2 它适用于第一个元素
但它不适用于动态添加的第二个元素
我尽力做到这一点,但我是 JavaScript 和 select2
的新手
我把我的全部代码写在这里
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<table class="table" id="dynamicTable12" style="width: 50%">
<tr>
<th scope="col" span="1" style="width: 25%;" >projects</th>
</tr>
<tr>
<td> <select name="addmore1[0][project]" class="form-control" id="state" required="required">
<option value="">-- Select Project --</option>
<option value="A">A</option>
<option value="B">B</option>
</select></td>
<td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td> </tr>
</table>
<script type="text/javascript">
var i = 0;
$("#add12").click(function(){
++i;
$("#dynamicTable12").append('<tr><td><select name="addmore1['+i+'][project]" id="" class="form-control" required="required"><option value="">-- Select Project --</option> <option value="A">A</option><option value="B">B</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
$(document).on('click', '.remove-tr', function(){
$(this).parents('tr').remove();
});
$(document).ready(function() {
$('.js').select2();
});
</script>
我不太确定您提供的原始代码是否工作正常。因为没有具有 .js
class 的元素,如以下行所示:
$('.js').select2();
但是,让我们开门见山。第二个或后面的 select
没有运行的原因是当创建新元素时,select2
插件没有重新定义这个新元素。因此,您必须重新初始化 select2
插件。您可以通过在单独的函数中提供初始化代码来实现这一点,然后在添加新元素时调用它。注意提供的代码中的 js
class 和 reinitializeSelect2
函数。
let initializeSelect2 = function() {
$('.js').select2();
}
var i = 0;
$("#add12").click(function(){
++i;
$("#dynamicTable12").append('<tr><td><select name="addmore1['+i+'][project]" id="" class="form-control js" required="required"><option value="">-- Select Project --</option> <option value="A">A</option><option value="B">B</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
initializeSelect2()
});
$(document).on('click', '.remove-tr', function(){
$(this).parents('tr').remove();
});
$(document).ready(function() {
initializeSelect2()
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<table class="table" id="dynamicTable12" style="width: 50%">
<tr>
<th scope="col" span="1" style="width: 25%;" >projects</th>
</tr>
<tr>
<td> <select name="addmore1[0][project]" class="form-control js" id="state" required="required">
<option value="">-- Select Project --</option>
<option value="A">A</option>
<option value="B">B</option>
</select></td>
<td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td> </tr>
</table>
我正在尝试以 Html 形式实现 select2 它适用于第一个元素
但它不适用于动态添加的第二个元素
我尽力做到这一点,但我是 JavaScript 和 select2
的新手我把我的全部代码写在这里
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<table class="table" id="dynamicTable12" style="width: 50%">
<tr>
<th scope="col" span="1" style="width: 25%;" >projects</th>
</tr>
<tr>
<td> <select name="addmore1[0][project]" class="form-control" id="state" required="required">
<option value="">-- Select Project --</option>
<option value="A">A</option>
<option value="B">B</option>
</select></td>
<td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td> </tr>
</table>
<script type="text/javascript">
var i = 0;
$("#add12").click(function(){
++i;
$("#dynamicTable12").append('<tr><td><select name="addmore1['+i+'][project]" id="" class="form-control" required="required"><option value="">-- Select Project --</option> <option value="A">A</option><option value="B">B</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
$(document).on('click', '.remove-tr', function(){
$(this).parents('tr').remove();
});
$(document).ready(function() {
$('.js').select2();
});
</script>
我不太确定您提供的原始代码是否工作正常。因为没有具有 .js
class 的元素,如以下行所示:
$('.js').select2();
但是,让我们开门见山。第二个或后面的 select
没有运行的原因是当创建新元素时,select2
插件没有重新定义这个新元素。因此,您必须重新初始化 select2
插件。您可以通过在单独的函数中提供初始化代码来实现这一点,然后在添加新元素时调用它。注意提供的代码中的 js
class 和 reinitializeSelect2
函数。
let initializeSelect2 = function() {
$('.js').select2();
}
var i = 0;
$("#add12").click(function(){
++i;
$("#dynamicTable12").append('<tr><td><select name="addmore1['+i+'][project]" id="" class="form-control js" required="required"><option value="">-- Select Project --</option> <option value="A">A</option><option value="B">B</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
initializeSelect2()
});
$(document).on('click', '.remove-tr', function(){
$(this).parents('tr').remove();
});
$(document).ready(function() {
initializeSelect2()
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<table class="table" id="dynamicTable12" style="width: 50%">
<tr>
<th scope="col" span="1" style="width: 25%;" >projects</th>
</tr>
<tr>
<td> <select name="addmore1[0][project]" class="form-control js" id="state" required="required">
<option value="">-- Select Project --</option>
<option value="A">A</option>
<option value="B">B</option>
</select></td>
<td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td> </tr>
</table>