求助：实现Selectbox分类联动及对应隐藏信息展示功能

以下是原生JavaScript实现的完整代码，完全匹配你的需求：

div{display: none;}

<select class="SelectboxA">
  <option value="">Option1</option>
  <option value="opt_1">Option1</option>
  <option value="opt_2">Option2</option>
  <option value="opt_3">Option3</option>
</select>

<select class="SelectboxB" disabled>
  <option class="opt_1a" value="sub_opt_1">Option_1A (shows if select "opt_1" in SelectboxA)</option>
  <option class="opt_1b" value="sub_opt_1">Option_1B (shows if select "opt_1" in SelectboxA)</option>
  <option class="opt_1c" value="sub_opt_1">Option_1C (shows if select "opt_1" in SelectboxA)</option>
  <option class="opt_2a" value="sub_opt_2">Option_2A (shows if select "opt_2" in SelectboxA)</option>
  <option class="opt_2b" value="sub_opt_2">Option_2B (shows if select "opt_2" in SelectboxA)</option>
  <option class="opt_2c" value="sub_opt_2">Option_2C (shows if select "opt_2" in SelectboxA)</option>
  <option class="opt_3a" value="sub_opt_3">Option_3A (shows if select "opt_3" in SelectboxA)</option>
  <option class="opt_3b" value="sub_opt_3">Option_3B (shows if select "opt_3" in SelectboxA)</option>
  <option class="opt_3c" value="sub_opt_3">Option_3C (shows if select "opt_3" in SelectboxA)</option>
 </select>
 
<div class="opt_1a_info">Info if select option with class "opt_1a"</div>
<div class="opt_1b_info">Info if select option with class "opt_1b"</div>
<div class="opt_1c_info">Info if select option with class "opt_1c"</div>
<div class="opt_2a_info">Info if select option with class "opt_2a"</div>
<div class="opt_2b_info">Info if select option with class "opt_2b"</div>
<div class="opt_2c_info">Info if select option with class "opt_2c"</div>
<div class="opt_3a_info">Info if select option with class "opt_3a"</div>
<div class="opt_3b_info">Info if select option with class "opt_3b"</div>
<div class="opt_3c_info">Info if select option with class "opt_3c"</div>

// 获取页面元素
const selectA = document.querySelector('.SelectboxA');
const selectB = document.querySelector('.SelectboxB');
const infoDivs = document.querySelectorAll('div[class$="_info"]');

// SelectboxA 选择事件处理
selectA.addEventListener('change', function() {
  const selectedValue = this.value;
  
  // 重置所有信息面板为隐藏状态
  infoDivs.forEach(div => div.style.display = 'none');
  
  if (!selectedValue) {
    // 选中空值选项：禁用SelectboxB并重置状态
    selectB.disabled = true;
    selectB.selectedIndex = 0;
    Array.from(selectB.options).forEach(opt => opt.style.display = 'none');
    return;
  }
  
  // 启用SelectboxB并过滤显示对应子选项
  selectB.disabled = false;
  let firstVisibleOption = null;
  
  Array.from(selectB.options).forEach(opt => {
    // 匹配选项class前缀与SelectboxA选中值
    if (opt.className.startsWith(selectedValue)) {
      opt.style.display = 'block';
      if (!firstVisibleOption) firstVisibleOption = opt;
    } else {
      opt.style.display = 'none';
    }
  });
  
  // 自动选中第一个可见子选项并触发信息展示
  if (firstVisibleOption) {
    firstVisibleOption.selected = true;
    selectB.dispatchEvent(new Event('change'));
  }
});

// SelectboxB 选择事件处理：展示对应信息面板
selectB.addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  const targetInfoClass = `${selectedOption.className}_info`;
  
  // 隐藏所有面板后显示目标面板
  infoDivs.forEach(div => div.style.display = 'none');
  const targetDiv = document.querySelector(`.${targetInfoClass}`);
  if (targetDiv) targetDiv.style.display = 'block';
});

// 初始化页面状态
selectA.dispatchEvent(new Event('change'));

核心功能说明 #

• SelectboxA 联动控制：
  • 选中空值时，自动禁用SelectboxB并清空其状态，同时隐藏所有信息面板。
  • 选中具体分类时，启用SelectboxB，通过选项class前缀匹配（如opt_1对应所有opt_1a/1b/1c类选项），只显示对应子选项，并自动选中第一个可见选项触发信息展示。
• SelectboxB 信息展示：
  • 选中子选项后，根据选项class拼接目标信息面板的类名，隐藏所有面板后显示对应内容。
• 状态自动重置：每次切换SelectboxA时，自动清理所有已显示的信息面板，确保状态不残留。

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