Πώς να δημιουργήσετε: Καρτέλες αναπτυσσόμενες下拉 λίστες

Δημιουργία τριών下拉 λίστες

Δημιουργία τριών下拉 λίστες εντός της HTML φόρμας.

Δεύτερη και τρίτη下拉 λίστες θα εμφανίζουν διαφορετικές επιλογές, ανάλογα με την επιλογή που έχει γίνει στη μητρική下拉 λίστα.

第一步 - 添加 HTML：

<form name="form1" id="form1" action="/action_page.php">
  Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br>
  Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>
  <br><br>
  Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Please select topic first</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

第二步 - 添加 JavaScript：

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");
  για (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    // Εκκένωση των μενύων πτώσεων "Θέματα" και "Θέματα"
    chapterSel.length = 1;
    topicSel.length = 1;
    // Εμφάνιση σωστής τιμής
    για (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // Εκκένωση του μενού πτώσεων "Θέματα"
    chapterSel.length = 1;
    // Εμφάνιση σωστής τιμής
    var z = subjectObject[subjectSel.value][this.value];
    για (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

Δοκιμάστε προσωπικά

Σελίδες σχετικές

Εκμάθηση:}}Καταλογισμός CSS

Εκμάθηση:}}Πώς να δημιουργηθεί: Καταλογισμός αναρρώσεων που αναρρώνονται