選擇下拉框時要啓用的文本框

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