Kutengeneza: Kusoroka kubwa

Ongeza tatu ya kusoroka

Ongeza tatu ya kusoroka kwenye formu ya HTML.

Makala ya pili na tatu ya kusoroka zitaonyesha chaguo chafupi, kwa matokeo ya thamani ya kusoroka kuu.

Kipindi cha Pili - Ongeza HTML:

<form name="form1" id="form1" action="/action_page.php">
  Mada: <select name="subject" id="subject">
    <option value="" selected="selected">Chagua mada</option>
  </select>
  <br><br>
  Mada: <select name="topic" id="topic">
    <option value="" selected="selected">Tafadhali chagua mada kwanza</option>
  </select>
  <br><br>
  Makala: <select name="chapter" id="chapter">
    <option value="" selected="selected">Tafadhali chagua mada kwanza</option>
  </select>
  <br><br>
  <input type="submit" value="Tuma">
</form>

Kipindi cha Kwanza - Ongeza JavaScript:

var subjectObject = {
  "Mwili wa Kwanza": {
    "HTML": ["Makini wa Kichwa", "Picha", "Meza", "Orodha"],
    "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() {
    // Clear 'Chapter' and 'Topic' dropdown menus
    chapterSel.length = 1;
    topicSel.length = 1;
    // Show correct value
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // Clear the 'Chapter' dropdown menu
    chapterSel.length = 1;
    // Show correct value
    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]);
    }
  }
}

jifunze tena

pembaaji wa kipindi

教程：CSS 下拉菜单

教程：如何创建可悬停的下拉菜单