快捷導(dǎo)航

js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)

更新時(shí)間：2018年12月04日 08:41:16 作者：believe__sss

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在做項(xiàng)目的時(shí)候，一個(gè)添加問題題目，選項(xiàng)和答案的問題，題目類型分為選擇題，判斷題，和多選題三種，此處需要添加一個(gè)二級(jí)聯(lián)動(dòng)的功能，即當(dāng)題型為選擇題的時(shí)候，正確選項(xiàng)的下拉框里出現(xiàn)的是A,B,C,D.如果題型是判斷題，正確選項(xiàng)的下拉框內(nèi)容為正確，錯(cuò)誤，如果題型類型為多選題，則正確答案的輸入框變?yōu)榭奢斎氪鸢感偷奈谋究颉?shí)現(xiàn)效果在文末。

HTML的頁面如下：

<div class='form-group'>
 <label class='col-md-2 control-label'>題型</label>
 <div class='col-md-2'>
  //通過fn()函數(shù)去改變答案框狀態(tài)的改變
  <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'>正確選項(xiàng)</label>
 <div class='col-md-10'>
//此處寫一個(gè)下拉框一個(gè)input框，當(dāng)題型為多選時(shí)，利用JS將下拉框隱藏，input框顯示
 <input class='form-control' placeholder='正確選項(xiàng)' 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">
//頁面加載時(shí)執(zhí)行init函數(shù)，使多選題的正確答案的文本框隱藏
init();
function init（）{
 $("#answerTrue1").hide();
}
 
//題目類型和答案選擇的二級(jí)聯(lián)動(dòng)
 function fn(){
 var type=document.getElementById("type");
 var t=type.value;
 var answer=document.getElementById("answerTrue2");
 switch(t)
 {
  //判斷是選擇題還是判斷題，然后改變下拉框中的內(nèi)容
  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>錯(cuò)誤</option>";
  $("#answerTrue1").hide();
  $("#answerTrue2").show();
  break;
  default:$("#answerTrue1").show();
  $("#answerTrue2").hide();
 }
 };
</script>

實(shí)現(xiàn)效果如下：