Member Avatar for HunainHafeez

i have a table in Mysql's database, tblStudents, which has 1,000 stdents, from different departments, e.g 500 from IIT, 300 from IMS, 100 from Medical, 100 from Engineering.

and on fornt end in, i have 2 dropdown boxes, one drpdwnDown box is filled with values, IMS, IIT, MEDICAL, ENGINEERING. now i want to fill 2nd dropdown box on basis of 1st drop down box selection mean if i click IMS from 1st dropdown box then 2nd dropdown box should be filled with all students roll no., from IMS or if i click IIT then 2nd dropdown box should be filled with all students' roll no.s from IIT,
from database it should pck value.

i spent 2 days on it but couldn't solve it, plz help me with it

PHP, MYSQL, HTML

  • 3 Contributors
  • 2 Replies
  • 220 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by slyme

Dani AI

Generated

A concise, practical pattern that implements what asked for: the first dropdown selects a department, an AJAX request sends that value to the server, the server runs a parameterized SELECT with a WHERE clause (as suggested), returns JSON, and the client populates the second dropdown. The resource linked by is a good UX reference; below is a minimal, secure example using fetch() and PDO.

HTML

<select id="dept">
  <option value="">-- choose department --</option>
  <option value="IMS">IMS</option>
  <option value="IIT">IIT</option>
  <option value="MEDICAL">MEDICAL</option>
  <option value="ENGINEERING">ENGINEERING</option>
</select>

<select id="students">
  <option value="">Select department first</option>
</select>

JavaScript (client-side)

document.getElementById('dept').addEventListener('change', function() {
  const dept = this.value;
  const students = document.getElementById('students');
  students.innerHTML = '';
  if (!dept) { students.appendChild(new Option('Select department','')); return; }

  fetch('get_students.php?dept=' + encodeURIComponent(dept))
    .then(r => r.ok ? r.json() : Promise.reject(r.statusText))
    .then(data => {
      if (!data.length) { students.appendChild(new Option('No students found','')); return; }
      data.forEach(s => {
        students.appendChild(new Option(s.roll_no + ' - ' + (s.name || ''), s.roll_no));
      });
    })
    .catch(err => {
      students.appendChild(new Option('Error loading students',''));
      console.error(err);
    });
});

PHP (server-side, get_students.php)

<?php
header('Content-Type: application/json; charset=utf-8');
$dept = $_GET['dept'] ?? '';
if ($dept === '') { echo json_encode([]); exit; }

try {
  $pdo = new PDO('mysql:host=localhost;dbname=your_db;charset=utf8mb4','db_user','db_pass',[
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES => false,
  ]);
  $stmt = $pdo->prepare('SELECT roll_no, name FROM tblStudents WHERE department = ? ORDER BY roll_no');
  $stmt->execute([$dept]);
  echo json_encode($stmt->fetchAll());
} catch (Exception $e) {
  http_response_code(500);
  echo json_encode(['error' => 'Server error']);
}
?>

Troubleshooting and hardening notes:

  • Use prepared statements to prevent SQL injection and set proper DB charset (utf8mb4).
  • Verify actual column names (e.g. roll_no, department) and that stored department values match sent values (case/spacing).
  • Inspect the browser Network tab for the GET request and response body; confirm Content-Type is application/json.
  • Use numeric department IDs instead of free-text names for robustness.
  • For very large lists, prefer server-side search/limit or an autocomplete rather than dumping thousands of options.

Recommended Answers

All 2 Replies

Member Avatar for DarkMonarch

wheres your code, its hard to fix something we cant see

...

you should have a query to the student table where the WHERE clause match the 1st table variable you previously queried, then use the variable to add the student in the select drop list option name.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.