从两个相应的下拉列表中选择多个 [英] Multiple selection from two respective dropdown
问题描述
我在html页面中有两个下拉列表。第一个下拉列表包含Class-1，class-2，class3 ..
，第二个下拉列表包含所选类的StudentNameID。我想在第一个下拉菜单中选择课程的多个选择，并且各自的课程管理studentID的第二个下拉列表选择。
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>
我想要多个选择是在那里选择Id存储在变量中，所以通过爆炸我会使用它在我的下一页页面重定向。
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.
我的问题是我想要两个下拉列表中的多个选择。
如果我从第一个下拉菜单中选择Class-1和Class-2，那么Atomatic第二个下拉列表将显示所选ClassID的相关值。
第二个下拉菜单也是相同的多重选择。
你能告诉我如何使用php和java脚本来审核？
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?
推荐答案
你所期望的不是一个基本的html元素，它需要jquery集成。从css和js从 https：// github。 com / harvesthq / selected / releases /
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：
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如下：
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：
Config.php:
<?php
$dbcon = new PDO("mysql:host=localhost;dbname=test", 'root', '');
?>
这篇关于从两个相应的下拉列表中选择多个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
