依赖下拉选择

Question

1. Standard selection

2. Section Selection

3. Subject selection

on selection depend on other section depends on standard.subject depends on section If i select subject then it display that subject assignments only

Answer 1

Generally, when you need something to change based on a dropdown, use the onchange event. Example:

<select id="standardSelectId" onchange="fillSection(this)">...</select>
<select id="sectionSelectId" onchange="fillSubject(this)"><option>-- Select Standard first --</option></select>
<select id="subjectSelectId"><option>-- Select Section first --</option></select>

Then, write a javascript function to fill the next select with options, and clear any selects that are dependent on the next select:

<script type="text/javascript">
function fillSection(e) {
  var choice = e.options[e.selectedIndex];
  var sectionSelect = document.getElementById("sectionSelectId");
  var subjectSelect = document.getElementById("subjectSelectId");
  subjectSelect.options.length = 0;
  try { subjectSelect.add(new Option("-- Select Section first --", ""))} catch(ex) {subjectSelect.add(new Option("-- Select Section first --", ""), null)}
  sectionSelect.options.length = 0;
  switch (choice.value) {
    case <standard val1>:
      try { sectionSelect.add(new Option(section1_label_1, section1_key_1))} catch(ex) {subjectSelect.add(new Option(section1_label_1, section1_key_1), null)}
      ...
      try { sectionSelect.add(new Option(section1_label_N, section1_key_N))} catch(ex) {subjectSelect.add(new Option(section1_label_N, section1_key_N), null)}
      break;
    case <standard valX>:
      try { sectionSelect.add(new Option(sectionX_label_1, sectionX_key_1))} catch(ex) {subjectSelect.add(new Option(sectionX_label_1, sectionX_key_1), null)}
      ...
      try { sectionSelect.add(new Option(sectionX_label_N, sectionX_key_N))} catch(ex) {subjectSelect.add(new Option(sectionX_label_N, sectionX_key_N), null)}
      break;
  }
  function fillSubject(e) {
    ...
  }