javascript - 选择下拉框时启用的文本框

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