我希望在下拉框中选择 NINO 或 CRN 时显示一个文本框。
我的问题是文本框似乎总是出现,然后当我选择“未知”时它会消失,我希望它仅在下拉选项为选项时才出现。
这是我的代码:
var select = document.getElementById('NINOCRN'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == "NINO";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
//attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
National Insurance, CRN, Unknown
<select id="NINOCRN" required onchange="showDiv(this)">
<option value="select" disabled selected>Please Select</option>
<option value="NINO">National Insurance Number (NINO)</option>
<option value="CRN">Child Reference Number (CRN)</option>
<option value="Unknown">Unknown NINO/CRN</option>
</select>
<br>
<br>
<br>
<div id="hidden_div">
<input type="text" name="NINO" required>
<br>
<br>
</div>
有人可以帮助我吗?
最佳答案
首先隐藏输入,然后根据您的选择显示/隐藏。
var select = document.getElementById('NINOCRN'),
onChange = function(event) {
var val = this.options[this.selectedIndex].value;
var shown = val === "NINO" || val === "CRN";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
//attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
检查fiddle
关于javascript - 选择下拉框时启用的文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35221818/