HTML下拉选择框select满足选中条件时后续select显示隐藏实现咨询

HTML 结构 #

将同主题的下拉框统一放在分组容器内，给首个控制用的select和关联字段容器分别加标识类：

<div class="theme-group">
  <!-- 首个控制主题相关性的select -->
  <select class="theme-control-select">
    <option value="yes">yes</option>
    <option value="no">no</option>
  </select>
  <!-- 该主题下其余select的容器 -->
  <div class="theme-related-fields">
    <select>
      <option value="yes">yes</option>
      <option value="no">no</option>
    </select>
    <select>
      <option value="yes">yes</option>
      <option value="no">no</option>
    </select>
    <!-- 更多同主题的select可直接添加在此容器内 -->
  </div>
</div>

如果有多个不同主题的下拉组，重复上述.theme-group结构即可。

CSS 样式 #

定义隐藏类用于控制关联字段的显示状态：

.fields-hidden {
  display: none;
}

JavaScript 逻辑 #

绑定控制select的切换事件，实时同步关联字段的显示状态：

document.addEventListener('DOMContentLoaded', function() {
  const controlSelects = document.querySelectorAll('.theme-control-select');
  
  controlSelects.forEach(select => {
    // 页面初始化时先匹配当前选中值的显示状态
    toggleRelatedFields(select);
    // 绑定切换事件
    select.addEventListener('change', function() {
      toggleRelatedFields(this);
    });
  });

  function toggleRelatedFields(controlSelect) {
    const relatedGroup = controlSelect.closest('.theme-group');
    const relatedFields = relatedGroup.querySelector('.theme-related-fields');
    const relatedSelects = relatedFields.querySelectorAll('select');

    if (controlSelect.value === 'no') {
      relatedFields.classList.add('fields-hidden');
      // 不需要提交隐藏select的值时，加上disabled属性
      relatedSelects.forEach(item => item.disabled = true);
    } else {
      relatedFields.classList.remove('fields-hidden');
      relatedSelects.forEach(item => item.disabled = false);
    }
  }
});

补充说明 #

• 隐藏的select默认会随表单提交，添加disabled属性后PHP将不会接收到对应字段值，可根据业务需求选择是否保留该逻辑
• 无需修改现有PHP提交逻辑，原有表单提交流程可正常运行

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