Question

当下拉框等于上述部分时，有没有办法让DIV框出现？如果＆＃34;密码设置＆＃34;然后启用了＆＃34;密码设置＆＃34; div box会变得可见。

    <p>Security Actions</p>
    <select id="style">
        <option value="#">No action taken</option>
        <option value="password">Password Settings</option>
        <option value="disable-access">Disable Access</option>
    </select>

DIV Box示例：

 <div id="password">
Password Settings Here
</div>

Answer 1

更改选择框时隐藏要显示的框，向选择框添加事件侦听器，并使用选定的值作为要显示的ID。如果您只想显示select值的div，请遍历所有隐藏的框并隐藏它们，然后显示所选的ID。

＆＃13;

document.getElementById('style').addEventListener('change', function() {
  var hides = document.getElementsByClassName('hide');
  for (var i = 0; i < hides.length; i++) {
    hides[i].style.display = 'none';
  }
  document.getElementById(this.value).style.display = 'block';
})

＆＃13;

.hide {
  display: none;
}

＆＃13;

<p>Security Actions</p>
<select id="style">
  <option value="#">No action taken</option>
  <option value="password">Password Settings</option>
  <option value="disable-access">Disable Access</option>
</select>

<div id="password" class="hide">
  Password Settings Here
</div>
<div id="disable-access" class="hide">
  disable-access
</div>

＆＃13;

DIV的下拉框显示

1 个答案: