如何实现HTML下拉选有效项后启用按钮并关闭弹窗

第一步：调整HTML基础结构 #

给弹窗、按钮加上唯一标识，给按钮设置初始禁用状态：

<!-- 弹窗外层容器添加id用于控制显隐，如果你已有弹窗容器直接加id即可 -->
<div id="datePopup" class="popup-wrap">
  <select name="dates" id="dates">
    <option value=""> --- Please Select --- </option>
    <option value="1" disabled>July 11th - 18th FULLY BOOKED</option>
    <option value="2" disabled>July 19th - 26th FULLY BOOKED</option>
    <option value="3" disabled>July 27th - 31st FULLY BOOKED</option>
    <option value="4" disabled>August 1st - 8th FULLY BOOKED</option>
    <option value="5" disabled>August 9th - 16th FULLY BOOKED</option>
    <option value="6" disabled>August 17th - 24th FULLY BOOKED</option>
    <option value="7" disabled>August 25th - 31st FULLY BOOKED</option>
    <option value="8" disabled>September 1st - 8th FULLY BOOKED</option>
    <option value="9" disabled>September 9th - 16th FULLY BOOKED</option>
    <option value="10" disabled>September 17th - 24th FULLY BOOKED</option>
    <option value="11" disabled>September 25th - 30th FULLY BOOKED</option>
    <option value="12">October 1st - 8th AVAILABLE</option>
    <option value="13">October 9th - 16th AVAILABLE</option>
    <option value="14">October 17th - 24th AVAILABLE</option>
    <option value="15">October 25 - 31st AVAILABLE</option>
  </select> 
  <!-- 按钮添加id，初始设置disabled属性 -->
  <button id="acceptBtn" type="button" disabled>Accept</button>
</div>

第二步：添加交互JS代码 #

把下面代码放在页面底部的script标签里即可，不需要引入任何第三方库：

// 获取页面元素
const dateSelect = document.getElementById('dates')
const acceptBtn = document.getElementById('acceptBtn')
const datePopup = document.getElementById('datePopup')
// 定义允许选中的有效值白名单
const validOptionValues = ['12', '13', '14', '15']

// 监听下拉框选择变化
dateSelect.addEventListener('change', function() {
  // 当前选中值在白名单内则启用按钮，否则保持禁用
  acceptBtn.disabled = !validOptionValues.includes(this.value)
})

// 监听确认按钮点击
acceptBtn.addEventListener('click', function() {
  // 隐藏弹窗实现关闭效果，如果你的弹窗是通过class控制显隐，替换为对应class操作即可
  datePopup.style.display = 'none'
})

逻辑说明 #

• 初始状态下按钮自带disabled属性，默认不可点击，无需额外初始化逻辑
• 选择值校验采用白名单机制，即便用户通过浏览器调试工具修改禁用选项的状态选中了已约满的日期，按钮也不会被启用
• 点击按钮后直接在前端隐藏弹窗，没有任何服务端提交逻辑，符合需求

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