Swashbuckle/Swagger中如何根据下拉选值隐藏指定下拉菜单？

问题原因 #

1. SwaggerUI的接口参数面板是动态渲染的：只有点击折叠面板箭头后，<noscript>标签才会被替换为实际的表单元素，因此document.readyState === 'complete'时，目标下拉框还未生成
2. 错误使用setAttribute修改可见性：<tr>的可见性需要通过style属性直接修改，而非设置visibility属性

修复后的代码 #

// 创建DOM变化监听器，等待动态元素加载
const domObserver = new MutationObserver((mutations) => {
  // 获取目标元素
  const providerSelect = document.querySelector("[data-param-name='provider'] select");
  const nodeGroupRow = document.querySelector("[data-param-name='nodeGroup']");

  if (providerSelect && nodeGroupRow) {
    // 标记已绑定事件，避免重复绑定
    if (!providerSelect.dataset.changeBound) {
      providerSelect.dataset.changeBound = 'true';
      
      // 绑定下拉框切换事件
      providerSelect.addEventListener('change', function() {
        const selectedText = this.options[this.selectedIndex].text;
        // 控制表格行的可见性：collapse保留表格布局，none完全隐藏
        nodeGroupRow.style.visibility = selectedText === 'EcoPlatform' ? 'visible' : 'collapse';
      });

      // 初始化时触发一次，确保默认状态正确
      providerSelect.dispatchEvent(new Event('change'));
    }
    // 元素已加载完成，停止监听
    domObserver.disconnect();
  }
});

// 监听文档主体的DOM变化（包含子树）
domObserver.observe(document.body, {
  childList: true,
  subtree: true
});

关键说明 #

• MutationObserver：专门用于监听DOM结构变化，完美适配SwaggerUI这类动态生成内容的场景
• 事件防重复绑定：通过dataset标记已绑定的元素，避免多次触发监听逻辑
• 初始化触发：手动触发change事件，确保页面加载后默认选中值对应的行状态符合预期
• 可见性控制：visibility: collapse针对表格行优化，隐藏后不会打乱表格布局；若需要完全移除占位，可改为nodeGroupRow.style.display = selectedText === 'EcoPlatform' ? 'table-row' : 'none'

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