js實現下拉框二級聯動

2019-11-19 12:25:00

字體：大中小

來源：轉載

供稿：網友

在做項目的時候，一個添加問題題目，選項和答案的問題，題目類型分為選擇題，判斷題，和多選題三種，此處需要添加一個二級聯動的功能，即當題型為選擇題的時候，正確選項的下拉框里出現的是A,B,C,D.如果題型是判斷題，正確選項的下拉框內容為正確，錯誤，如果題型類型為多選題，則正確答案的輸入框變為可輸入答案型的文本框。實現效果在文末。

HTML的頁面如下：

<div class='form-group'> <label class='col-md-2 control-label'>題型</label> <div class='col-md-2'>  //通過fn()函數去改變答案框狀態的改變  <select class="form-control input-sm" id="type" onclick="fn()">    <option value="選擇題">選擇題</option>  <option value="判斷題">判斷題</option>  <option value="多選題">多選題</option>  </select> </div></div>  <div class='form-group'> <label class='col-md-2 control-label'>正確選項</label> <div class='col-md-10'>//此處寫一個下拉框一個input框，當題型為多選時，利用JS將下拉框隱藏，input框顯示 <input class='form-control' placeholder='正確選項' type='text' name='answerTrue1' id='answerTrue1' type="hidden" data-bv-notempty='true' data-bv-notempty-message='正確答案不能為空'> <select class="form-control input-sm" id="answerTrue2" name="answerTrue2"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </div></div>

以下為JS部分：

<script type="text/javascript">//頁面加載時執行init函數，使多選題的正確答案的文本框隱藏init();function init（）{ $("#answerTrue1").hide();} //題目類型和答案選擇的二級聯動 function fn(){ var type=document.getElementById("type"); var t=type.value; var answer=document.getElementById("answerTrue2"); switch(t) {  //判斷是選擇題還是判斷題，然后改變下拉框中的內容  case "選擇題": answer.innerHTML="<option>A</option><option>B</option>           <option>C</option><option>D</option>";  $("#answerTrue1").hide();  $("#answerTrue2").show();  break;  case "判斷題":answer.innerHTML="<option>正確</option><option>錯誤</option>";  $("#answerTrue1").hide();  $("#answerTrue2").show();  break;  default:$("#answerTrue1").show();  $("#answerTrue2").hide(); } };</script>

實現效果如下：