如何实现select下拉框与radio单选按钮选中值双向同步联动

完全可以实现这个双向联动效果，不需要重构你现有代码，只需要在原有事件逻辑里加几行同步状态的代码即可。

核心逻辑 #

两边靠统一的分类值做匹配：radio用data-filter属性存储分类值，select的option用value属性存储分类值，只要同分类的两个值完全一致，就能精准对应：

• 操作radio触发值变化时，直接把select的选中值设为当前radio的data-filter值
• 操作select触发值变化时，遍历所有radio，把data-filter值等于select当前选中值的那项设为选中，其余取消选中
• JS直接修改表单元素的value、checked属性不会自动触发change/input事件，不会出现事件循环触发的问题

修改后的JS代码 #

只需要调整你原有的两个事件绑定函数即可，HTML结构不需要改动：

function filterCategoryRadio(ads) {
  let radios = document.querySelectorAll('.filter-category');
  const categorySelect = document.querySelector('#category-select');
  radios.forEach(radio => {
    radio.addEventListener('input', function() {
      let selectedVal = radio.getAttribute('data-filter');
      // 同步下拉框选中值
      categorySelect.value = selectedVal;

      if (selectedVal === "all") {
        listAds(ads);
      } else {
        let filtered = ads.filter(ann => ann.category === selectedVal)
        listAds(filtered);
      }
    })
  })
}

function filterCategorySelect(ads) {
  let categorySelect = document.querySelector('#category-select');
  const radios = document.querySelectorAll('.filter-category');

  categorySelect.addEventListener('change', function() {
    let selectedVal = categorySelect.value;
    // 同步对应单选按钮选中状态
    radios.forEach(radio => {
      radio.checked = radio.getAttribute('data-filter') === selectedVal;
    })

    if (selectedVal === "all") {
      listAds(ads);
    } else {
      let filtered = ads.filter(ann => ann.category === selectedVal)
      listAds(filtered);
    }
  })
}

适配注意事项 #

• 后续动态新增分类选项时，要保证新增option的value值、对应radio的data-filter值完全一致，否则会出现匹配失效
• 如果分类项是动态渲染生成的，要等所有option和radio都渲染到页面上之后，再调用这两个绑定事件的函数，避免获取不到DOM元素
• 如果需要做初始状态校验，页面加载完成后手动触发一次select的change事件，就能自动对齐两边状态和筛选结果

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