js实现下拉框两级联动

在做项目时，会添加一个包含问题、选项和答案的问题。题目类型分为选择题、判断题、选择题。这里需要增加一个二级联动功能，即当题型为选择题时，正确选项下拉框为A、B、C、d，如果题型为真或假，则正确选项下拉框为正确和错误。如果题型是选择题，那么实现效果在文末。

该网页如下所示：

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()'选项值=' multiple choice '选择题/选项值=' true或false' true或false/Option选项值=' multiple choice '选择题/选项/select/div/div class=' form-group ' label class='当问题类型为多个时，使用JS隐藏下拉框。在输入框中，输入class=' form-control '占位符=' correct Option ' type=' text ' name=' answer true 1 ' id=' answer true 1 ' type=' hidden ' data-bv-not empty=' true ' data-bv-no . Tempty-message=' correct answer不能为空'选择class=' form-control input-sm ' id=' answer true 2 ' name=' answer true 2 '选项值=' a ' a/选项值=' b' b/Option选项值=' c' c/option选项

脚本类型='text/javascript'/页面加载时执行init函数，使init()隐藏在选择题正确答案的文本框中；函数init(){ $('#answerTrue1 ')。hide()；}//用于问题类型和答案选择的辅助链接函数fn(){ var type=document . getelementbyid(' type ')；var t=type.valuevar答案=document . getelementbyid(' answertrue 2 ')；Switch(t) {//判断是选择题还是判断题，然后更改下拉框中的内容。案例‘选择题’:答案。inner html=' optiona a/option b/option id/option '；$('#answerTrue1 ')。hide()；$('#answerTrue2 ')。show()；打破；大小写“true或false”: answer . innerhtml=“选项正确/选项错误/选项”；$('#answerTrue1 ')。hide()；$('#answerTrue2 ')。show()；打破；default:$('#answerTrue1 ')。show()；$('#answerTrue2 ')。hide()；} };/script实现效果如下：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。