У меня есть два выпадающих списка html page.1st Contain Class-1, class-2, class3 .. и 2nd dropdown содержат 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 из первого выпадающего списка, тогда атомарное второе выпадающее меню отобразит соответствующие значения из выбранных ClassID. Также такой же множественный выбор для второго выпадающего списка. Не могли бы вы рассказать мне, как я буду использовать скрипт php и java?
То, что вы ожидаете, не является базовым элементом html, оно также требует интеграции с jQuery. Возьмите css и js из https://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>