使用jQuery实现点击对应div同步修改下拉框选中值的方案求助

架构老林

2026-10-3

问题解决方案

第一步：调整div的target属性

将所有.showSingle类div的target属性值替换为对应下拉选项的value，对应关系如下：

<!-- 示例修改后代码，剩余div依次对应option value 668~675即可 -->
<a href="#1"><div style="display: inline-block; margin-bottom: 0.4em;" class="showSingle greenactive" target="665">select1</div></a>
<a href="#2"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="666">select2</div></a>
<a href="#3"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="667">select3</div></a>

第二步：替换原有JS代码

将原有script代码替换为以下内容，注意代码需要放在jQuery引用的后面：

$(function() {
  const $select = $('#sel2');
  const $allDiv = $('.showSingle');
  
  // 绑定div点击事件，同步修改下拉框选中值
  $allDiv.on('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    const targetVal = $(this).attr('target');
    // 单选模式：仅保留当前点击项为选中状态，如需多选可调整逻辑为切换选中状态
    $select.val([targetVal]).trigger('change');
  });

  // 下拉框值变化时同步修改div选中样式
  $select.on('change', function() {
    const selectedVal = $(this).val();
    $allDiv.removeClass('selected greenactive');
    $allDiv.filter('[target="' + selectedVal + '"]').addClass('selected greenactive');
  });

  // 初始化默认选中状态
  $select.trigger('change');
})