javascript - Select2 dynamically added inputs not working
问题描述
I have a table using the multiselect from Select2, works fine. However I have a button to add a row by cloning the previous and adding a new id to the row, I am using the same the same markup for the multi-select. That one is disabled. I have tried re-initializing after the row is added but doesn't work :( Below is the html and the js.
HTML:
<select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>
<?=$displaySelectData?>
</select>
JS:
$(document).ready(function () {
$('.js-example-basic-multiple').select2();
var sample_row = 1;
$('#addrow').click(function(e) {
e.preventDefault();
var sample_row_template = $('#sample_row_template')
.clone() // CLONE THE TEMPLATE
.attr('id', 'row' + (sample_row++)) // MAKE THE ID UNIQUE
.appendTo($('#sample_table tbody')) // APPEND TO THE TABLE
.show(); // SHOW IT
});
$('.js-example-basic-multiple').select2();
});
the row I am cloning
<tr id="sample_row_template" style="display: none;">
<td width="200px">
<input class="form-control" name="sample-reference" type="text" value="">
</td>
<td width="150px">
<input class="form-control" name="sample-date" type="date" value="<?=$today?>" id="example-date-input">
</td>
<td width="150px">
<input class="form-control" name="sample-time" type="time" value="<?=$now?>" id="example-time-input">
</td>
<td >
<select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>
<?=$displaySelectData?>
</select>
</td>
<td width="200px">
<select class="fart form-control">
<option>Select</option>
<option value="1">1 Day</option>
<option value="2">2 Day</option>
<option value="3">3 Day</option>
<option value="4">4 Day</option>
<option value="5">5 Day</option>
<option value="6">6 Day</option>
<option value="7">7 Day</option>
<option value="8">8 Day</option>
<option value="9">9 Day</option>
<option value="10" selected>10 Day</option>
</select>
</td>
</div>
</tr>
解决方案
The main issue is that you are not calling .select2()
after cloning the row. If you look closely, your second call to .select2()
occurs outside your .click()
handler, even though your whitespace makes it appear like it is inside.
One other issue is that it will be best to call .select2()
on just the cloned row, not globally. In my testing if I kept the function call like you have it then any row cloned after the first ended up displaying both the select dropdown and the select2 dropdown next to each other. This code should do the trick:
$(document).ready(function () {
var sample_row = 1;
$('#addrow').click(function(e) {
e.preventDefault();
var new_row = $('#sample_row_template')
.clone() // CLONE THE TEMPLATE
.attr('id', 'row' + (sample_row++)) // MAKE THE TABLE ROW ID UNIQUE
.appendTo($('#sample_table tbody')) // APPEND TO THE TABLE BODY
.show() // SHOW IT
;
// now, initialize select2 *only* on the new row that was created
new_row.find('.js-example-basic-multiple').select2();
});
});
推荐阅读
- django - 是否可以在部署在 heroku 上的应用程序上重置 django 迁移?
- bash - 从字符串中查找并替换大写字符并保留原始匹配
- c++ - WDK 开发中的关键过程检查
- html - 没有使用伪元素的带箭头的框
- c# - '程序或函数 insert_newemployee 指定的参数太多。'
- awk - 匹配两个文件中的值并替换特定列中的值
- java - 每年动态创建表(hibernate+java+postgresql)
- python-2.7 - 添加命令行参数以读取所有图像以创建调色板
- python - 是否可以使用 GAN 仅填充图像的缺失部分而不是生成整个图像?
- oracle - 调用发送邮件程序后发生错误