如何迭代動態表單中的每個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元素

回答

相關問題