依赖下拉选择

Question

1. 标准选择

2. 部门选择

3. 主题选择

上的选择依赖于其他部分取决于standard.subject取决于节 如果我选择然后它显示该主题分配只有

Answer 1

通常，当您需要根据下拉列表更改某些内容时，请使用onchange事件。例如：

<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> 

然后，写JavaScript函数以填充下一个选择的选项，并清除依赖于下一个选择的任何选择：

<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) { 
    ... 
    }