Multiple selection from two respective dropdown

2019-09-17 09:17发布

站内问答 / PHP
704 2 5

I have two dropdown in html page.1st dropdown Contain Class-1, class-2,class3.. and 2nd dropdown contain StudentNameID for selected Classes. I wanted to multiple selection for classes in first dropdown and respective classes manage second dropdown selection for 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>

I want multiple selection is there and selected Id store in variable.So,by exploding I will use it on my next page where page redirect.

My question Is I want multiple selection fron both dropdowns. If I choose Class-1 and Class-2 from 1st drop down then atomatic 2nd dropdown will shows related values from selected ClassID's. Also same multiple selection for 2nd dropdown. Can you please tell me How I will approched using php and java script?

2条回答
虎瘦雄心在
2楼-- · 2019-09-17 09:41

Not sure what you are asking but maybe this will help.

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

On your second page do

$classes[]=$_POST['class'];
<select>
<?php
 foreach($class as $num){
 echo "<option>StudentNameID1".$num."</option>";
 }
 ?>
 </select>
查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
3楼-- · 2019-09-17 09:49

What you are expecting is not a basic html element, it requires jquery integration as well.. Take css and js from https://github.com/harvesthq/chosen/releases/

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>

And getSub.php as below:

<?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', '');

?>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)