在 HTML 表单上动态添加字段
Dynamically adding fields on HTML Form
我正在处理简单的表单,用户可以在其中输入文本并将标签分配给(可选)文本,因为用户可以 select 多个标签我决定使用 select 标签和 "multiple" 属性。第一行的所有工作都按预期进行,但是当我移动以动态添加新元素时,所有多个 select 框的行为都不像第一行。
- 我正在使用 SumoSelect / BootStrap-Select JQuery 插件让我的 multi select 盒子看起来更好 (https://hemantnegi.github.io/jquery.sumoselect/ )
- 使用 bootstrap-select 我设法添加了另一行,新添加的行上的元素独立于上面的行工作,但它添加了 2 个这样的多 select 框。
- 使用 SumoSelect,新添加的 multi select 框没有响应
解释起来有点复杂,下面是代码和截图
HTML代码:
<div class="tab-pane fade active in" id="summary">
<br>
<a href="#">
<span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true"></span>
</a>
<br><br>
<div id="something_tbl">
<p>Something <span class="user_info" style="padding-left: 5px; color:gray;">Enter something...</span></p>
<p>
<ol>
<li style="padding-bottom: 5px;" id="something_pt">
<input type="text" style="width: 70%;" placeholder="enter something" id="something" name="something">
<select name="something_tags" multiple size="5"
id="lbl_picker" class="selectpicker_1">
<option value="1">fun</option>
<option value="2">boring</option>
<option value="3">hehe</option>
<option value="4">lol</option>
<option value="5">xyz</option>
</select>
</li>
</ol>
</p>
</div>
JQuery/JavaScript:
$("#add_something").on('click', function() {
$('#something_tbl ol li#something_pt:first').clone().insertAfter('#something_tbl ol li#something_pt:last');
$("#something_tbl ol li#something_pt:last #something").val('')
var elem = $('#something_tbl ol li#something_pt:last');
elem.append('<a href=\"#\"><span id=\"remove_summary\" title=\"Remove\" class=\"glyphicon glyphicon-minus\" style=\"padding-left: 5px;\"></span></a>');
add_lbl_picker();
elem.children('a').click(remove_summary);
return false;
});
var remove_summary = function() {
var tbl_length = $('#something_tbl ol li#summary_pt').length;
if (tbl_length > 1) {
$(this).parents('li').remove();
}
return false;
};
var add_lbl_picker = function() {
var summary_tbl_length = $('#something_tbl ol li#something_point').length;
$('#something_tbl ol li#something_point:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
$('.selectpicker_' + summary_tbl_length).SumoSelect();
};
$('.selectpicker_1').SumoSelect();
图片:
正如您在上面看到的,第一个 "multi select" 中 select 的内容被复制到所有行,除了第一行,所有其他 multi select 都不起作用!
注意:multi 中最多有 5 个值 select 而不是更多,并且值是静态加载的
我想你在哪里写的:
var add_lbl_picker = function() {
var summary_tbl_length = $('#something_tbl ol li#something_point').length;
$('#something_tbl ol li#something_point:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
$('.selectpicker_' + summary_tbl_length).SumoSelect();
};
你的意思是:
var add_lbl_picker = function() {
var summary_tbl_length = $('#something_tbl ol li#something_pt').length;
$('#something_tbl ol li#something_pt:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
$('.selectpicker_' + summary_tbl_length).SumoSelect();
};
我把something_point改成了something_pt.
我认为您的代码在正确使用属性 "class" 和 "id" 方面存在一些混淆。
对于您的脚本,下面的代码可以完成工作:
<div class="tab-pane fade active in" id="summary">
<br>
<a href="#">
<span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true">lkjlkjk</span>
</a>
<br><br>
<div id="something_tbl">
<p>Something <span class="user_info" style="padding-left: 5px; color:gray;">Enter something...</span></p>
<p>
<ol>
<li style="padding-bottom: 5px;" class="something_pt">
<input type="text" style="width: 70%;" placeholder="enter something" class="something" name="something">
<select name="something_tags" multiple size="5" class="lbl_picker selectpicker_1">
<option value="1">fun</option>
<option value="2">boring</option>
<option value="3">hehe</option>
<option value="4">lol</option>
<option value="5">xyz</option>
</select>
</li>
</ol>
</p>
</div>
<script>
$("#add_something").on('click', function() {
something_pt_content.clone().insertAfter('.something_pt:last');
$('.remove_summary:last').click(function(){
if ($('.something_pt').length > 1) {
$(this).parents('li').remove();
}
})
$('.selectpicker_1').SumoSelect();
});
var something_pt_content = $('.something_pt').clone().append('<a href=\"#\"><span title=\"Remove\" class=\"remove_summary glyphicon glyphicon-minus\" style=\"padding-left: 5px;\">oijojoj</span></a>');
$('.selectpicker_1').SumoSelect();
</script>
我正在处理简单的表单,用户可以在其中输入文本并将标签分配给(可选)文本,因为用户可以 select 多个标签我决定使用 select 标签和 "multiple" 属性。第一行的所有工作都按预期进行,但是当我移动以动态添加新元素时,所有多个 select 框的行为都不像第一行。
- 我正在使用 SumoSelect / BootStrap-Select JQuery 插件让我的 multi select 盒子看起来更好 (https://hemantnegi.github.io/jquery.sumoselect/ )
- 使用 bootstrap-select 我设法添加了另一行,新添加的行上的元素独立于上面的行工作,但它添加了 2 个这样的多 select 框。
- 使用 SumoSelect,新添加的 multi select 框没有响应
解释起来有点复杂,下面是代码和截图
HTML代码:
<div class="tab-pane fade active in" id="summary">
<br>
<a href="#">
<span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true"></span>
</a>
<br><br>
<div id="something_tbl">
<p>Something <span class="user_info" style="padding-left: 5px; color:gray;">Enter something...</span></p>
<p>
<ol>
<li style="padding-bottom: 5px;" id="something_pt">
<input type="text" style="width: 70%;" placeholder="enter something" id="something" name="something">
<select name="something_tags" multiple size="5"
id="lbl_picker" class="selectpicker_1">
<option value="1">fun</option>
<option value="2">boring</option>
<option value="3">hehe</option>
<option value="4">lol</option>
<option value="5">xyz</option>
</select>
</li>
</ol>
</p>
</div>
JQuery/JavaScript:
$("#add_something").on('click', function() {
$('#something_tbl ol li#something_pt:first').clone().insertAfter('#something_tbl ol li#something_pt:last');
$("#something_tbl ol li#something_pt:last #something").val('')
var elem = $('#something_tbl ol li#something_pt:last');
elem.append('<a href=\"#\"><span id=\"remove_summary\" title=\"Remove\" class=\"glyphicon glyphicon-minus\" style=\"padding-left: 5px;\"></span></a>');
add_lbl_picker();
elem.children('a').click(remove_summary);
return false;
});
var remove_summary = function() {
var tbl_length = $('#something_tbl ol li#summary_pt').length;
if (tbl_length > 1) {
$(this).parents('li').remove();
}
return false;
};
var add_lbl_picker = function() {
var summary_tbl_length = $('#something_tbl ol li#something_point').length;
$('#something_tbl ol li#something_point:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
$('.selectpicker_' + summary_tbl_length).SumoSelect();
};
$('.selectpicker_1').SumoSelect();
图片:
正如您在上面看到的,第一个 "multi select" 中 select 的内容被复制到所有行,除了第一行,所有其他 multi select 都不起作用!
注意:multi 中最多有 5 个值 select 而不是更多,并且值是静态加载的
我想你在哪里写的:
var add_lbl_picker = function() {
var summary_tbl_length = $('#something_tbl ol li#something_point').length;
$('#something_tbl ol li#something_point:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
$('.selectpicker_' + summary_tbl_length).SumoSelect();
};
你的意思是:
var add_lbl_picker = function() {
var summary_tbl_length = $('#something_tbl ol li#something_pt').length;
$('#something_tbl ol li#something_pt:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
$('.selectpicker_' + summary_tbl_length).SumoSelect();
};
我把something_point改成了something_pt.
我认为您的代码在正确使用属性 "class" 和 "id" 方面存在一些混淆。 对于您的脚本,下面的代码可以完成工作:
<div class="tab-pane fade active in" id="summary">
<br>
<a href="#">
<span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true">lkjlkjk</span>
</a>
<br><br>
<div id="something_tbl">
<p>Something <span class="user_info" style="padding-left: 5px; color:gray;">Enter something...</span></p>
<p>
<ol>
<li style="padding-bottom: 5px;" class="something_pt">
<input type="text" style="width: 70%;" placeholder="enter something" class="something" name="something">
<select name="something_tags" multiple size="5" class="lbl_picker selectpicker_1">
<option value="1">fun</option>
<option value="2">boring</option>
<option value="3">hehe</option>
<option value="4">lol</option>
<option value="5">xyz</option>
</select>
</li>
</ol>
</p>
</div>
<script>
$("#add_something").on('click', function() {
something_pt_content.clone().insertAfter('.something_pt:last');
$('.remove_summary:last').click(function(){
if ($('.something_pt').length > 1) {
$(this).parents('li').remove();
}
})
$('.selectpicker_1').SumoSelect();
});
var something_pt_content = $('.something_pt').clone().append('<a href=\"#\"><span title=\"Remove\" class=\"remove_summary glyphicon glyphicon-minus\" style=\"padding-left: 5px;\">oijojoj</span></a>');
$('.selectpicker_1').SumoSelect();
</script>