Question

我试图在表格的单元格中迭代一些选择（它们不在表格中）。按下时我有一个提交按钮应该检索每个选择列表的值和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？

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>标记中。使用表单标签可以访问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

上查看此处的工作

Answer 2

自jQuery 1.7起，

live()已弃用，请改用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()});

Answer 3

修改：已更新为迭代select而不是tr。

也许你想要下面的东西，

DEMO

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()});

Answer 4

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

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

<强> jsFiddle example

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

Answer 5

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);
});

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

5 个答案:

修改

原始答案