依賴下拉選擇

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