Javascript 如何在动态表单中迭代每个select元素
我看到了一篇关于用递增ID克隆表单字段的帖子——效果很好 但是,在我的改编中,我在克隆表单中添加了一个选择框。选择框的id会按应有的方式递增。目标是,当选择特定的选项(在每个克隆字段中始终相同)时,会显示一些隐藏的输入 我可以用javascript为一组已知的select元素实现这一点,但我不知道如何迭代每个克隆的Javascript 如何在动态表单中迭代每个select元素,javascript,jquery,clone,each,Javascript,Jquery,Clone,Each,我看到了一篇关于用递增ID克隆表单字段的帖子——效果很好 但是,在我的改编中,我在克隆表单中添加了一个选择框。选择框的id会按应有的方式递增。目标是,当选择特定的选项(在每个克隆字段中始终相同)时,会显示一些隐藏的输入 我可以用javascript为一组已知的select元素实现这一点,但我不知道如何迭代每个克隆的select,因为用户可以根据需要创建任意数量的元素 因此,一个简单的版本是: HTML 我的每个函数中的语法有一些我不理解的地方吗?救命啊 您需要使用更改处理程序来侦听selec
select
,因为用户可以根据需要创建任意数量的元素
因此,一个简单的版本是:
HTML
我的每个
函数中的语法有一些我不理解的地方吗?救命啊 - 您需要使用更改处理程序来侦听select元素的更改事件
- 因为您有动态元素,所以需要使用事件委派
- 为了使元素访问更容易,我做了一些dom更改,还添加了一些类属性
选择一个值 消极的 模棱两可的 肯定的
添加另一行
演示:like?您的JSFIDLE运行良好。你想要什么?@Arun P Johny已经接近我想要的了。唯一的问题是隐藏的输入字段只与选择选项相关。我希望它们在选择选项为“正”时可见,但如果不是,则将其删除。其他元素应始终存在。在您的示例中,除“肯定”之外的任何选择都会删除其他字段。@user1837608因此哪些是与相关的文本字段select@Arun约翰尼-我用我想做的事更新了你的计划。谢谢你的快速帮助!现在我需要知道为什么我的迭代尝试没有成功。有什么建议吗?
<div id="zero_form" style="display:none;">
<p>
<input id='box1_' type="text" style="width:125px" placeholder='Type'>
<br>
<select id='box2_' class="first_input" style="width: 200px;" placeholder="Choose a Value">
<option value="Choose a Value">Choose a Value</option>
<option>NEGATIVE</option>
<option>EQUIVOCAL</option>
<option>POSITIVE</option>
</select>
<input id='box3_' style='display:none;' placeholder='Score #1'>
<input id='box4_' style='display:none;' placeholder='Score #2'>
<input id='box5_' style='display:none;' placeholder='%'>
<input id='box6_' type="text" placeholder="Enter Comments" style="width:200px">
<input type="button" id="remove" class="removebutton" value="Delete">
<br>
</p>
</div>
<!-- end hidden clone div-->
<form>
<p>
<span id="add" class="addbutton">Add another row</span>
</p>
</form>
$(document).ready(function () {
// show hidden inputs on POSITIVE selection
$('input [type=select]').each(function(){
var sel = $(this).val();
if (sel == 'POSITIVE'){
$(this).parent().find('[type=text]').show();}
else {
$(this).parent().find('[type=text]').hide();}
});
// clone fields
var form_index = 0;
$("#add").click(function () {
form_index++;
$(this).parent().before($("#zero_form").clone().attr("id", "zero_form" + form_index));
$("#zero_form" + form_index).css("display", "inline");
$("#zero_form" + form_index + " :input").each(function () {
$(this).attr("id", $(this).attr("id") + form_index);
});
$("#remove"+form_index).click(function () {
$(this).closest("div").remove();
});
});
});
$(document).ready(function () {
// show hidden inputs on POSITIVE selection
$(document).on('change', '.zero_form select.first_input', function () {
var sel = $(this).val();
$(this).parent().find('input.positive').toggle(sel == 'POSITIVE');
});
$(document).on('click', '.zero_form .removebutton', function () {
$(this).closest("div").remove();
});
// clone fields
var form_index = 0;
$("#add").click(function () {
form_index++;
var $from = $("#zero_form").clone().attr("id", "zero_form" + form_index).insertBefore($(this).parent())
$from.css("display", "inline");
$from.find(":input").each(function () {
$(this).attr("id", $(this).attr("id") + form_index);
});
});
});