从两个相应的下拉列表中进行多选 - Multiple selection from two respective dropdown

我在html页面中有两个下拉列表。第一个下拉列表包含类1、类2、类3。。第二个下拉列表包含所选类别的StudentNameID。我想在第一个下拉列表中为类进行多重选择，并且相应的类管理studentID的第二个下拉列表选择。

1st Dropdown-want mutiple selection
<select>
    <option value=".$row['classID'].">Class-1</option>
    ....like wise generate dropdown...
    <option>Class-2</option>
    <option>Class-3</option>
    <option>Class-4</option>
</select>  
2nd Dropdown-On selection of 1st dropdown show 2nd dropdown value.
<select> //same for 2nd dropdown list..
    <option>StudentNameID1-Class-1</option>
    <option>StudentNameID2-Class-1</option>
    <option>StudentNameID1-Class-2</option>
    <option>StudentNameID2-Class-2</option>
    <option>StudentNameID3-Class-2</option>
    <option>StudentNameID1-Class-3</option>
    <option>StudentNameID2-Class-3</option>
    <option>StudentNameID3-Class-3</option>
</select>

我希望有多个选择，并选择Id存储在变量中。所以，通过爆炸，我将在页面重定向的下一个页面上使用它。

我的问题是我想从两个下拉列表中选择多个。如果我从第一个下拉列表中选择Class1和Class2，那么第二个下拉列表将显示所选ClassID的相关值。第二个下拉菜单也有相同的多选项。你能告诉我如何使用php和java脚本吗？

您所期望的不是一个基本的html元素，它还需要jquery集成。。从中获取css和jshttps://github.com/harvesthq/chosen/releases/

Index.php作为belwo:

<?php
    require 'config.php';
    $stmt = "SELECT id, ClassId from classes ORDER BY id DESC";
    $query = $dbcon->query($stmt);
    $results = ( $query ) ? $query->fetchAll(PDO::FETCH_ASSOC) : '';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>imaphpdeveloper@gmail.com</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/prism.css">
  <link rel="stylesheet" href="css/chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
</head>
<body>
  <form>
    <div id="container">
      <div id="content">

      <h2><a name="multiple-select" class="anchor" href="#multiple-select">Multiple Select</a></h2>
      <div class="side-by-side clearfix">
        <div>
          <em>Classes</em>
          <select data-placeholder="Choose a Country..." class="chosen-select class-select" name="classes" multiple style="width:350px;" tabindex="4">
            <option value=""></option>
            <?php foreach($results as $result): ?>
                <option value="<?php echo $result['id'];?>"><?php echo $result['ClassId'];?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div>
          <em>Students</em>
          <select data-placeholder="Choose a Country..." class="student-select" name="classes" multiple style="width:350px;" tabindex="4">
            <option value=""></option>
          </select>
        </div>
      </div>

    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="js/chosen.jquery.js" type="text/javascript"></script>
  <script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  </script>
  <script>
  $('.class-select').change(function(){
        var classId = $(this).val();
        console.log(classId);
        $.ajax({
            url : 'getSub.php',
            type: 'POST',
            dataType : 'JSON',
            data : {
                'classId' : classId,
            },
            success : function(data){
                var optionBox = '<option value=""></option>';
                $.each(data, function(key, val){
                     optionBox += '<option value="'+val.id+'">'+val.StudentNm+'</option>';
                });
                $('.student-select').empty().append(optionBox);
                console.log(optionBox);
            }
        });
    });
  </script>
  </form>

和getSub.php如下：

<?php
    require 'config.php';
    $classIds = implode(',', $_POST['classId']);
    $stmt = "SELECT id, StudentID, ClassID, StudentNm from students where ClassID IN ($classIds)";
    $query = $dbcon->query($stmt);
    $results = ( $query ) ? $query->fetchAll(PDO::FETCH_ASSOC) : '';
    echo json_encode($results);
?>

Config.php：

<?php
    $dbcon = new PDO("mysql:host=localhost;dbname=test", 'root', '');
?>

不确定你在问什么，但这可能会有所帮助。

  <form action="redirect_page.php" method="POST">
   <input type="radio" name="class">
    Class-1</input>
    <input type="radio" name="class">Class-2</input>
    <input type="radio" name="class">Class-3</option>
    <input type="radio name="class4">Class-4</option>
</form>

在你的第二页上做

$classes[]=$_POST['class'];
<select>
<?php
 foreach($class as $num){
 echo "<option>StudentNameID1".$num."</option>";
 }
 ?>
 </select>