如何基于两个下拉选框的选中项为元素添加jQuery类？

首先修正你HTML里的小问题：<option>的class属性里不需要带.，比如把.red改成red，.size1改成size1——因为添加类时用的是类名，不是CSS选择器，带点会导致添加错误的类名。

核心思路是：不管哪个下拉框发生变化，都重新获取两个下拉框选中项对应的类，先清除目标DIV上旧的相关类，再添加新的类，实现双下拉框的联动效果。

完整实现代码 #

修正后的HTML

<select id="fil-select" data-target=".point">
  <option value="Very Low" class="red">Very Low</option>
  <option value="Low" class="green">Low</option>
  <option value="Average" class="blue">Average</option>
  <option value="High" class="pink">High</option>
  <option value="Very High" class="yellow">Very High</option>
</select>

<select id="fil-select2" data-target=".point">
  <option value="Very Low" class="size1">Very Low</option>
  <option value="Low" class="size2">Low</option>
  <option value="Average" class="size3">Average</option>
  <option value="High" class="size4">High</option>
  <option value="Very High" class="size5">Very High</option>
</select>

<div class="point"></div>

jQuery代码

// 定义统一的类更新函数
function updateDivClass() {
  // 获取目标DIV元素
  const targetDiv = $($('#fil-select').data('target'));
  
  // 获取两个下拉框选中项的类名
  const colorClass = $('#fil-select option:selected').attr('class');
  const sizeClass = $('#fil-select2 option:selected').attr('class');
  
  // 清除之前的颜色类和尺寸类，避免样式叠加冲突
  targetDiv.removeClass('red green blue pink yellow size1 size2 size3 size4 size5');
  
  // 添加新的组合类
  targetDiv.addClass(`${colorClass} ${sizeClass}`);
}

// 页面加载完成后初始化默认样式，并绑定事件
$(document).ready(function() {
  // 初始化默认选中项的样式
  updateDivClass();
  
  // 给两个下拉框绑定change事件，触发类更新
  $('#fil-select, #fil-select2').on('change', updateDivClass);
});

CSS测试示例

.point {
  width: 200px;
  height: 200px;
  margin: 20px 0;
  transition: all 0.3s;
}

/* 颜色控制类 */
.red { background-color: #ff4444; }
.green { background-color: #44dd44; }
.blue { background-color: #4444ff; }
.pink { background-color: #ff44aa; }
.yellow { background-color: #ffff44; }

/* 尺寸控制类 */
.size1 { width: 100px; height: 100px; }
.size2 { width: 140px; height: 140px; }
.size3 { width: 180px; height: 180px; }
.size4 { width: 220px; height: 220px; }
.size5 { width: 260px; height: 260px; }

关键说明 #

• 用统一函数处理更新逻辑，避免重复代码
• 每次更新前清除旧类，防止多个类堆积导致样式混乱
• 页面加载时执行一次函数，确保默认选中项的样式生效
• 如果后续类名有调整，只需修改removeClass中的类列表即可

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