html中,下拉框有正确和错误两个选项,选正确是显示input控件,选择错误隐藏掉input控件,显示填写内容控件。
时间: 2024-02-24 07:54:26 浏览: 130
html里input下拉框加载最近输入内容
5星 · 资源好评率100%
您可以使用JavaScript来实现这个功能。首先,在HTML代码中创建一个下拉框和两个控件,并为它们添加一个id属性:
```html
<select id="answer">
<option value="">请选择</option>
<option value="correct">正确</option>
<option value="incorrect">错误</option>
</select>
<div id="input-correct" style="display: none;">
<label>请输入正确答案:</label>
<input type="text" id="correct-answer">
</div>
<div id="input-incorrect" style="display: none;">
<label>请填写您的回答:</label>
<textarea id="incorrect-answer"></textarea>
</div>
```
然后,在JavaScript代码中,获取下拉框元素,并为其添加一个change事件监听器。当下拉框的值发生改变时,根据选项的值来显示相应的控件:
```javascript
const answerSelect = document.getElementById('answer');
const inputCorrect = document.getElementById('input-correct');
const inputIncorrect = document.getElementById('input-incorrect');
answerSelect.addEventListener('change', function() {
const answer = answerSelect.value;
if (answer === 'correct') {
inputCorrect.style.display = 'block';
inputIncorrect.style.display = 'none';
} else if (answer === 'incorrect') {
inputCorrect.style.display = 'none';
inputIncorrect.style.display = 'block';
} else {
inputCorrect.style.display = 'none';
inputIncorrect.style.display = 'none';
}
});
```
这段代码首先获取了下拉框元素和两个控件元素,并为下拉框元素添加了一个change事件监听器。当下拉框的值发生改变时,会执行回调函数。在回调函数中,根据选项的值来显示相应的控件,对于其他情况,将两个控件都隐藏。以上是一个简单的实现,您可以根据自己的需求进行修改。
阅读全文