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