js實現(xiàn)下拉框二級聯(lián)動

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:02:57

js實現(xiàn)下拉框二級聯(lián)動

js實現(xiàn)下拉框二級聯(lián)動:在做項目的時候，一個添加問題題目，選項和答案的問題，題目類型分為選擇題，判斷題，和多選題三種，此處需要添加一個二級聯(lián)動的功能，即當(dāng)題型為選擇題的時候，正確選項的下拉框里出現(xiàn)的是A,B,C,D.如果題型是判斷題，正確選項的下拉框內(nèi)容為正確，錯誤，如果

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀js實現(xiàn)下拉框二級聯(lián)動:在做項目的時候，一個添加問題題目，選項和答案的問題，題目類型分為選擇題，判斷題，和多選題三種，此處需要添加一個二級聯(lián)動的功能，即當(dāng)題型為選擇題的時候，正確選項的下拉框里出現(xiàn)的是A,B,C,D.如果題型是判斷題，正確選項的下拉框內(nèi)容為正確，錯誤，如果

在做項目的時候，一個添加問題題目，選項和答案的問題，題目類型分為選擇題，判斷題，和多選題三種，此處需要添加一個二級聯(lián)動的功能，即當(dāng)題型為選擇題的時候，正確選項的下拉框里出現(xiàn)的是A,B,C,D.如果題型是判斷題，正確選項的下拉框內(nèi)容為正確，錯誤，如果題型類型為多選題，則正確答案的輸入框變?yōu)榭奢斎氪鸢感偷奈谋究颉崿F(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'>正確選項</label>
 <div class='col-md-10'>
//此處寫一個下拉框一個input框，當(dāng)題型為多選時，利用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">
//頁面加載時執(zhí)行init函數(shù)，使多選題的正確答案的文本框隱藏
init();
function init（）{
 $("#answerTrue1").hide();
}
 
//題目類型和答案選擇的二級聯(lián)動
 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>錯誤</option>";
 $("#answerTrue1").hide();
 $("#answerTrue2").show();
 break;
 default:$("#answerTrue1").show();
 $("#answerTrue2").hide();
 }
 };
</script>

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