如何使用AJAX将选定的选项从下拉菜单传递到另一个页面

时间:2016-05-18 12:40:35

标签: php html arrays ajax

我在从下拉菜单中传递多个值时遇到问题。我正在做的是一个考勤系统,其中一个下拉菜单包含每个学生的出勤状态选择。然后,用户将相应地选择每个学生的出勤状态,我想要做的是将已经选择的状态传递给另一个页面。

我正在尝试使用AJAX将选定的出勤状态插入到数组中,然后将数组传递到另一个页面。这是我到目前为止所做的:

todaysattendance.php
//dropdown menu
<tr>
    <td>  $fetched_fName $fetched_lName  </td> 
    <td> <select name='okselect' id='okselect'>
        <option value='no'> </option>
  <option value='p' name='p' style='color:green; font-weight:bold;'>Present</option>
  <option value='ea' name='ea' style='color:#e1c872; font-weight:bold;'>Excused Absent</option>
  <option value='ua' name='ua' style='color:#e34c4c; font-weight:bold;'>Unexcused Absent</option>
  <option value='et' name='et' style='color:blue; font-weight:bold;'>Excused Tardy</option>
  <option value='ut' name='ut' style='color:purple; font-weight:bold;'>Unexcused Tardy</option>
  <option value='sr' name='sr' style='color:black; font-weight:bold;'>School's Representative</option>
  </select></td> </tr>

todaysattendance.php
//AJAX code
var tempArr = [];
    $("#okselect").change(function()
    {
        var output = getValues(this, function () 
        {
            for (var i=0;i<output.length;i++) 
            {
                tempArr.push(output);
            };
        });
        $.ajax({ 
        type: "POST", 
        url: "add_attendance_check.php", 
        data: {tempArr: tempArr}, 
        success: function(data) {
                   //
                },
                error: function(e) {
                   console.log(e.message);
                }
      }); 

});

add_attendance_check.php
   $passed_attstatus = array();
   $thestatus = $_POST['tempArr'];
   array_push($passed_attstatus, $thestatus);

但是从这个编码来看,假设我取得了10名学生的出勤状态,我只能设法获得最后一名学生的出勤状态。我需要帮助。非常感谢你提前!

3 个答案:

答案 0 :(得分:0)

在add_attendance_check中打印变量dropdown_value,您将获得所选下拉列表的值。

    <form method="post" action="" role="search">
     <select name='okselect' id='okselect'>
    <option value='no'> </option>
  <option value='p' name='p' style='color:green; font-weight:bold;'>Present</option>
  <option value='ea' name='ea' style='color:#e1c872; font-weight:bold;'>Excused Absent</option>
  <option value='ua' name='ua' style='color:#e34c4c; font-weight:bold;'>Unexcused Absent</option>
  <option value='et' name='et' style='color:blue; font-weight:bold;'>Excused Tardy</option>
  <option value='ut' name='ut' style='color:purple; font-weight:bold;'>Unexcused Tardy</option>
  <option value='sr' name='sr' style='color:black; font-weight:bold;'>School's Representative</option>
  </select>
    </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">
 jQuery(document).ready(function() {
    jQuery("#okselect").change(function() {
        var dropdown_value = $('#okselect').val(); 
                     $.ajax({ 
                    type: "POST", 
                    url: "add_attendance_check.php", 
                    data: {dropdown_value: dropdown_value}, 
                    success: function(data) {
                               //
                            },
                            error: function(e) {
                               console.log(e.message);
                        }
                    }); 
    });
 });
</script>

答案 1 :(得分:0)

我有一个好消息,我终于解决了这个问题。我需要做的就是从

更改todaysattendance.php中的这一行
<select name='okselect' id='okselect'>

<select name='okselect[]' id='okselect'>

在add_attendance_check.php中,我只是改为

$passed_attstatus = array();
$thestatus = $_POST['okselect'];
array_push($passed_attstatus, $thestatus);

从一开始就不需要AJAX。无论如何,我要感谢所有回复的人。祝你有个美好的一天!

答案 2 :(得分:-1)

<select name='okselect' id='okselect' onchange="abc(this.value)">
//your option
</select>

And Ajax call abc function inner abc(value)