在做專案的時候，一個新增問題題目，選項和答案的問題，題目型別分為選擇題，判斷題，和多選題三種，此處需要新增一個二級聯動的功能，即當題型為選擇題的時候，正確選項的下拉框裡出現的是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>
 

實現效果如下：



為了學習工作與休閒娛樂互不衝突，現新建圈【碼農茶水鋪】用於程式設計師生活，愛好，交友，求職招聘，吐槽等話題交流，希望各位大神工作之餘到茶水鋪來喝茶聊天。群號:582735936