Question

我在表单上工作。有选择元素，它们的选项来自数据库。

当我选择第一个（例如学校班级）时，第二个必须只显示最初选择的班级名称，也来自数据库。

我是Javascript和JQuery的新手，所以我可以通过页面刷新PHP解决方案，但我无法自己解决这个问题。你能给我一些指示或建议如何开始这方面的工作吗？

Answer 1

您可以使用jjery和json优先使用ajax实现此目的。

的JavaScript / AJAX：

function fillSecondSelect()
{
    $.get("ajaxFill.php?id=" + $("#class").val(),"",function(data) {
        var selectData = "<option value=''> - Choose Student - </option>";
        data = JSON.parse(data);
        for(i=0;i<data.length;i++)
        {
            selectData += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
        }
        $("#students").html(selectData);
    });
}

HTML：

<select id="class" name="class" onchange="fillSecondSelect()">
<option value=""> - Choose Class - </option>
<option value='1'>Class A</option>
<option value='2'>Class B</option>
</select>

<select id="students" name="students"></select>

ajaxFill.php（应根据mysql发送的类ID获取学生数据并将其作为JSON提供）：

$result = mysqli_query($link,"SELECT * FROM students WHERE class_id = '" . $_GET['id'] . "'") or die(mysqli_error($link));
while($row = mysqli_fetch_assoc($result)) 
{
    $students[] = array("id" => $row['student_id'], "name" => $row['student_name']);
}

echo json_encode($students);

Answer 2

您可以使用Jquery和Ajax根据所选的类获取课程中的学生，并将学生列表加载到Select元素中而不刷新页面。

HTML

<select id="selectedclass" onBlur="loadstudent();">
    <option>class 1</option>
    <option>class 2</option>
    <option>class 1</option>
</select>

 <select id="students" ></select>

的Javascript

  function loadstudent(){


 var selectedclass = $('selectedclass').val();//user id


$.ajax({

   type:'POST',
   url: your php script,
   data: 'selectedclass='+selectedclass,
   dataType: 'json',
   success: function(data)          
  {

    var classlist='', html;

    for(var i = 0; i < data.length; i++) {

        classlist = data[i];
                    html+=classlist.students

    }
        //get number of outbox
            $('#students').html(html);  


  },
  error: function(jqXHR, exception) {

            alert('Error');

    }
});

}

PHP

 <?php

   include "config.php";//database connection file

  //database using PDO
  $db = pdoDB::getConnection();

  //data from html
  $student_class=$_POST['selectedclass'];

   $query = "SELECT student_lastName,student_firstName
        FROM student_table WHERE student_class='student_class'"; 

   $result   = $dbase->query($query) or die("failed!");

  while ($row = $result->fetch(PDO::FETCH_BOTH)){


    //credits info
    $studentlist="<option>".$row['student_lastName']." ".$row['student_firstName']."</option>";



   $results[] = array("students"=>$studentlist);


 }

  header('Content-type:application/json');
   exit (json_encode($results)); 



?>

从PHP脚本发送的数据应使用JSON

进行编码

Answer 3

现代网站使用ajax来做到这一点。

在选择第一个项目后，将发送一个ajax请求，该请求将传递第二个选择的数据。

有很多方法可以构建第二个选择。 ajax响应可以包含带有所有数据的json数组，然后使用js构建select字段。

或者响应提供了完整的HTML，您只需要插入它。

Answer 4

我认为这正是您的意思：http://codepen.io/man/pen/oBFlE

将js代码放入您的文件中。你可以拥有任意数量的关卡。说明：

<select name="level1"><!--this is the "main" select-->
<option value="level2A">Level2A</option>
<option value="level2A">Level2B</option>
</select>
<select name="level2A"><!--this shows when the user selects the option with name ""level2A"-->
<option value="level3"></option>
</select>
<select name="level2B">
<!--options...-->
</select>
<select name="level3"></select>

如何使<select> <option>与另一个</option> </select>＆＃39; s <option>相关？</option>

4 个答案: