php - 如何获取多个选择列表的值和 id 并将其传递给 AJAX？

Question

我正在尝试迭代表格单元格中的多个选择(它们不在表单中)。我有一个提交按钮，按下时应该检索每个选择列表的值和 id，我将通过 AJAX 和 PHP 将其传递到服务器。我的表是一门类(class)的学生表。该表包含学生姓名以及类(class)中某节课的出勤情况。

这是我在 Pastebin 和 jsFiddle 上的表格。 http://pastebin.com/NvRAbC7m和 http://jsfiddle.net/4UheA/

请注意，该表完全是动态的。没有。行及其中的信息是动态驱动的。

这就是我现在正在尝试使用 jQuery 做的事情。请原谅我的 JavaScript 技能中的逻辑或完全胡说八道。我其实不知道自己在做什么。我只是在尝试和犯错。

$('#saveAttendances').live('click', function()
{
    var attendSelect = $('.attendSelect');
    var students = new Array();
    //get select list values and id. 
    for(var i in attendSelect)
    {
        students['student_id'] += attendSelect[i].id;
        students['student_id']['attedance'] += attendSelect[i].value;
        console.log(students['student_id']);
    }
    //after retrieving values, post them through ajax
    // and update the attendances of students in PHP
    $.post("",{ data: array }, function(msg)
    {
         alert(msg);
    }); 

}); 

如何获取每个选择列表的值和 ID 并将其传递给 AJAX？

Answer 1

编辑

如果您坚持违背 jQuery 的原则并使用无效的 HTML，这里有一个适合您的解决方案:

$(function() {
    $('button').click(function(){
       var data = $(".attendSelect").wrap('<form/>').serialize();
       $.post('process.php', data, function(response){ ... });
       return false;            
    });
});​

值得一提的是，这个例子并不依赖于奇特的 .on()或.live()来电。但是，这需要您拥有正确的 name您的 <select> 上设置的属性元素如下所述。这也解决了您的无效数字 id属性问题。

See it working here on jsFiddle

<小时/>

原始答案

首先，对 HTML 进行一些细微的更改。您需要包裹您的<select> <form> 中的元素标签。使用 form 标签将使您可以访问 jQuery 的 .serialize()方法，这正是您正在寻找的功能。就我个人而言，我建议使用 jQuery Way™ 进行操作，而不是实现您自己的序列化形式。为什么要重新发明轮子？

接下来是您的td有非唯一的 ID。让我们更新它们以使用 class属性而不是 id 。例如，

<td class="studentName">Aaron Colman</td>

其次，您的<select>元素可以受益于 name属性使表单处理方式更容易。

<select class="attendSelect" name="students[241]">
    ...

<select class="attendSelect" name="students[270]">
    ...

<select class="attendSelect" name="students[317]">
    ...

最后，jQuery 的 .serialize()这将是您的中奖彩票。

​$(function() {
    $('form').submit(function(){
       $.post('process.php', $(this).serialize(), function(response){ ... });
       return false;            
    });
});​

提交后，序列化字符串将类似于

students[241]=Late&students[270]=Absent&students[317]=default

查看它在 jsFiddle 上的工作情况