dougan5772
2012-04-04 18:38
浏览 136

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

I am trying to iterate through a number of selects in a cell of a table (they are not in a form). I have a submit button when pressed is supposed to retrieve the values and id of each select list which I will pass to the server via AJAX and PHP. My table is a table of students of a course. The table contains the students name and their attendance for a lesson in the course.

This is my table on Pastebin and jsFiddle. http://pastebin.com/NvRAbC7m and http://jsfiddle.net/4UheA/

Please note that this table is entirely dynamic. The no. of rows and the info in them is dynamically driven.

This is what I'm trying to do right now with jQuery. Please excuse the logic or the complete nonsense that is my JavaScript skills. I don't actually know what I'm doing. I'm just doing trial and error.

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

}); 

How do I get the values and id's of each select list and pass it to AJAX?

图片转代码服务由CSDN问答提供 功能建议

我试图在表格的单元格中迭代一些选择(它们不在表格中) 。 按下时我有一个提交按钮应该检索每个选择列表的值和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(); 
 //获取选择列表值和id。
 for(var i in attendSelect)
 {
 students ['student_id'] + = attendSelect  [i] .id; 
学生['student_id'] ['atteance'] + = attendSelect [i] .value; 
 console.log(students ['student_id']); 
} 
 // after 检索值,通过ajax 
 //发布它们并以PHP 
 $ .post(“”,{data:array},function(msg)
 {
 alert(msg); 
更新学生的出勤率 }); 
 
});  
   
 
 

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • dopuz8728 2012-04-04 18:48
    已采纳

    Edit

    If you insist on going against jQuery's grain and using invalid HTML, here's a suitable solution for you:

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

    Worth mentioning, this example does not rely on fanciful .on() or .live() calls. However, this requires you to have the proper name attribute set on your <select> elements as described below. This also resolves your invalid numeric id attributes issue.

    See it working here on jsFiddle


    Original Answer

    First off, some minor changes to your HTML. You need to wrap your <select> elements in a <form> tag. Using the form tag will give you access to jQuery's .serialize() method which is the exact functionality you're looking for. Personally, I'd recommend doing things the jQuery Way™ instead of implementing your own form a serialization. Why reinvent the wheel?

    Next, your td have non-unique IDs. Let's update those to use a class attribute instead of an id. E.g.,

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

    Secondly, your <select> elements could benefit from a name attribute to make form processing way easier.

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

    Lastly, jQuery's .serialize() is going to be your winning ticket.

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

    Upon submit, the serialized string will look something like

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

    See it working here on jsFiddle

    打赏 评论
  • dtnqbre7980007 2012-04-04 18:44

    live() is deprecated as of jQuery 1.7, use on() instead

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

    students is an array, so I don't think you can do students['student_id'], if you would like to push an array of student, you can:

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

    in your php:

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

    As @nathan mentioned in comment, avoid using number as the first character of an ID, you can use 'student_<?php echo $id ?>' instead and in your .each() loop:

    students.push({'id':$(this).attr('id').replace('student_', ''), 'val':$(this).val()});
    
    打赏 评论
  • douyuan6490 2012-04-04 18:50

    Edit: Updated to iterate over select instead of tr.

    Perhaps you want something like below,

    DEMO

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

    This would give you an object like below,

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

    If the above is not the desired structure then modify the .each function in the code.

    For ex: For a structure like below,

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

    You need to change the code a little,

     var students = [];
     ...
     ...
     students.push({$dd.attr('id'): $dd.val()});
    
    打赏 评论
  • dtlzdofl66441 2012-04-04 18:58

    Here's jQuery that will build an object you can pass to your script:

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

    jsFiddle example.

    This results in: {241:"Late",270:"Absent",317:"Late"}

    打赏 评论
  • duadlkc5762218 2012-04-04 19:01
    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);
    });
    
    打赏 评论

相关推荐 更多相似问题