如何基于JavaScript和HTML默认禁用下拉列表B并实现联动控制

步骤1：完善HTML结构 #

先添加下拉列表A，同时给下拉列表B加上disabled属性实现默认禁用，顺便修正原代码里的属性写法问题：

<label for="staffStatus">New staff?</label>
<select id="staffStatus" name="staffStatus">
  <option value="No" selected>No</option>
  <option value="Yes">Yes</option>
</select>

<br><br>

<label for="ck1">New staff join Date:</label>
<form method="post" action="?">
  <select name="ckb" id="ck1" disabled>
    <option selected>-----Select Cut-----</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
  </select>
</form>

步骤2：添加JavaScript交互逻辑 #

监听下拉列表A的选择变化，根据选中值动态切换下拉列表B的禁用状态：

// 获取两个下拉菜单的DOM元素
const statusSelect = document.getElementById('staffStatus');
const dateSelect = document.getElementById('ck1');

// 绑定选择变化事件
statusSelect.addEventListener('change', function() {
  // 选中"Yes"时启用B，否则禁用
  dateSelect.disabled = this.value !== 'Yes';
});

核心逻辑说明 #

• 下拉列表A通过selected属性默认选中"No"选项
• 下拉列表B通过disabled属性默认处于禁用状态
• 当用户切换A的选项时，通过JavaScript判断选中值，实时修改B的disabled属性实现状态切换

内容的提问来源于stack exchange，提问作者DTech