选择下拉框时要启用的文本框

Question

我想在下拉框中选择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>

谁能帮助我？

Answer 1

先隐藏输入，然后根据您的选择显示/隐藏。

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