如何迭代动态表单中的每个select元素

我看到this用于克隆带有递增ID的表单字段 - 很好。如何迭代动态表单中的每个select元素

但是，在我的改编中，我添加了一个克隆形式的选择框。选择框的id会像应该那样增加。目标是当选择一个特定的选择（在每个克隆领域总是相同的）时，显示一些隐藏的输入。

我可以用一组已知的选择元素来做到这一点，但我不知道如何迭代每个克隆的select，因为用户可以根据需要创建多少个？

一个简单的版本是这样的：

HTML

<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>

jQuery的

$(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(); 
     }); 
    }); 

});

JSfiddle

也有一些是我不理解有关语法我each函数内？请帮助！

来源

2014-02-25 user1837608

像http://jsfiddle.net/arunpjohny/Cpm8r/1/？ –

你的jsfiddle工作正常。你想要什么？ –

@Arun P Johny与我想要的非常接近。唯一的问题是隐藏的输入字段仅适用于选择选项。我希望它们在选择选项是'正面'时可见，但如果不是则删除。其他元素应该始终在那里。在你的例子中，除“POSITIVE”以外的任何选择都会删除其他字段。 – user1837608

你需要用变化处理程序来听
既然你有动感的元素，你需要使用事件代表团
使元素访问更容易选择元素的变化时，我已一些DOM变化也 - 增加了一些类属性

选择一个值负片VE 模棱两可正

添加另一行

然后

$(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); 
     }); 
    }); 

});

演示：Fiddle

来源

2014-02-25 04:45:15

如何迭代动态表单中的每个select元素

回答

相关问题