Question

我在html page.1st下拉列表中有两个下拉列表包含Class-1，class-2，class3 .. 和第二个下拉列表包含所选类的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存储在变量中。所以，通过爆炸，我将在我的下一页页面重定向上使用它。

我的问题我是否希望从两个下拉菜单中选择多个选项。如果我从第一个下拉列表中选择Class-1和Class-2，那么atomatic 2nd下拉列表将显示所选ClassID的相关值。第二次下拉列表也有相同的多项选择。你能告诉我如何使用php和java脚本进行处理吗？

Answer 1

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

  <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>

Answer 2

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

Index.php as 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', '');

?>

从两个相应的下拉菜单中选择多个

2 个答案: