1

我正在尝试遍历表格单元格中的许多选择（它们不在表格中）。按下时我有一个提交按钮，它应该检索每个选择列表的值和 id，我将通过 AJAX 和 PHP 将其传递给服务器。我的表是一门课程的学生表。该表包含学生的姓名和他们在课程中的一堂课的出勤率。

这是我在 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？

4

5 回答 5

2

编辑

如果你坚持违背 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属性问题。

看到它在 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上工作

于 2012-04-04T18:48:48.133 回答
1

live()自 jQuery 1.7 起已弃用，请on()改用

http://api.jquery.com/on/

学生是一个数组，所以我认为你不能这样做students['student_id']，如果你想推一个学生数组，你可以：

$('#saveAttendances').on('click', function() {
    var students = [];

    // iterate through <select>'s and grab key => values
    $('.attendSelect').function() {
        students.push({'id':$(this).attr('id'), 'val':$(this).val()});
    });

    $.post('/url.php', {data: students}, function() { // do stuff });
});

在你的 php 中：

var_dump($_POST); // see what's inside :)

正如@nathan 在评论中提到的，避免使用数字作为 ID 的第一个字符，您可以'student_<?php echo $id ?>'在.each()循环中使用：

students.push({'id':$(this).attr('id').replace('student_', ''), 'val':$(this).val()});
于 2012-04-04T18:44:17.503 回答
1

编辑：更新为迭代select而不是tr.

也许你想要像下面这样的东西，

演示

var $attendSelect  = $('#tutorTable tbody tr select');
var students = {};

$attendSelect.each (function () { //each row corresponds to a student               
    students[$(this).attr('id')] = $(this).val();
});

这会给你一个像下面这样的对象，

students = { '241': 'Late', '270': 'Absent', '317': 'default' };

如果以上不是所需的结构，则修改.each代码中的函数。

例如：对于如下结构，

students = [{ '241': 'Late'}, {'270': 'Absent'}, {'317': 'default'}];

您需要稍微更改代码，

 var students = [];
 ...
 ...
 students.push({$dd.attr('id'): $dd.val()});
于 2012-04-04T18:50:56.697 回答
1

这是 jQuery，它将构建一个可以传递给脚本的对象：

$('button').click(function() {
    var attendance = new Object;
    $('select').each(function() {
        attendance[$(this).attr('id')] = $(':selected', this).text();
    })
});​

jsFiddle 示例。

这导致：{241:"Late",270:"Absent",317:"Late"}

于 2012-04-04T18:58:55.633 回答
1 
var $select = $('.attendSelect'),
    students = [];
$('body').on('click', '#saveAttendances', function() {
    $select.each(function(k, v) {
        students[k] = {
            student_id : $(this).attr('id'),
            attedance  : $(this).val()
        };
    });
    console.log(students);
});
于 2012-04-04T19:01:36.583 回答