!DOCTYPE html
html
head
meta name=viewport content=width=device-width, initial-scale=1
script
var subjectObject = {
  Front-end {
    HTML [Links, Images, Tables, Lists],
    CSS [Borders, Margins, Backgrounds, Float],
    JavaScript [Variables, Operators, Functions, Conditions]    
  },
  Back-end {
    PHP [Variables, Strings, Arrays],
    SQL [SELECT, UPDATE, DELETE]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById(subject);
  var topicSel = document.getElementById(topic);
  var chapterSel = document.getElementById(chapter);
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    empty Chapters dropdown
    chapterSel.length = 1;
    display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i  z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}
script
head   
body

h1Cascading Dropdown Exampleh1

form name=form1 id=form1 action=action_page.php
Subjects select name=subject id=subject
    option value= selected=selectedSelect subjectoption
  select
  brbr
Topics select name=topic id=topic
    option value= selected=selectedPlease select subject firstoption
  select
  brbr
Chapters select name=chapter id=chapter
    option value= selected=selectedPlease select topic firstoption
  select
  brbr
  input type=submit value=Submit  
form

body
html