Question

我有3个带ID的表单（form1，form2，表单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中的提交按钮时，代码总是转到form1A中的选定选项。这个问题让我很难过。

如何修改我的代码以捕获最接近的表单。我尝试了一些技巧，但没有奏效。问题在于使用（＆＃39; *＆＃39;）过滤器与最近的过滤器。或者，如果有另一个解决方案，我会非常感谢你们。谢谢。

编辑：我可以轻松获取最接近的表单，但如何循环（每个）表单下拉列表，

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＆＃39; closest找到最近的父http://api.jquery.com/closest/

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

JQuery获取最接近的元素并过滤子元素

2 个答案: