jQuery獲取最接近的元素並過濾子級

Question

我有3個具有ID的表單（form1，form2，form 3）。 每個表單都有自己不同的下拉列表（drop1，drop2）和“提交”按鈕。 當您單擊每種形式的“提交”按鈕時。 它檢查選擇了哪個選項（在同一表單的下拉列表中）。 為了找到確切的選擇選項，我使用以下代碼：

    $(".submitButton").each(function(){

          $( this ).click(function(){buttonAddClicked(1)});
    });


    function buttonAddClicked(FormID){
          $('form'+ FormID +' *').filter('.MyDropDownList').each( function(){

           var selOption=$(this).find('option:selected');
    }

到現在為止一切正常。 我得到的選擇選項完全沒有問題。但是，當我進行一些修改時，就會發生問題。

准備好文檔后，我復制form1 html。 因此，form1與相同的id重復。

-假設我有form1A，form1B--

當我在form1A或form1B中按Submit按鈕時，代碼總是轉到form1A中的選定選項。 這個問題使我喪命。

如何修改代碼以捕獲最接近的表單。 我嘗試了一些技巧，但是沒有用。 問題在於將（'*'）與最近的過濾器一起使用。 或者，如果還有另一種解決方案可以解決這個問題，我將非常感謝你們。 謝謝 。

編輯：我可以輕松獲取最接近的表單，但是如何在該表單上循環（每個）下拉列表，

Answer 1

問題是您要傳遞1作為表單ID的所有按鈕單擊。

不需要這樣做，假設按鈕位於表單內，則可以使用.closest（）查找包含按鈕的表單，然后使用.find（）查找select元素和.val（）查找其元素選擇值如下圖所示

jQuery(function () {
    $(".submitButton").click(function () {
        var $form = $(this).closest('form');
        var selectedValue = $form.find('.MyDropDownList').val();
        //do whatever you want to do with the selectedvalue

        //if you have multiple elements and wants to have an array of values
        var selectedValues = $form.find('.MyDropDownList').map(function () {
            return $(this).val()
        }).get();
    });
})

Answer 2

首先，您在文檔中永遠不應有重復的ID。 它會導致輔助技術出現問題。 因此，最好的解決方案是在復制表單時修改ID。

但是，您可以使用jQuery closest來找到最接近的父代http://api.jquery.com/closest/

function buttonAddClicked(){
    var selOption = $(this).closest('form').find('.MyDropDownList').val();
}