如何通过选中选项值增删类并利用jQuery/JavaScript切换div显示

先把你的HTML补全一下，方便后续代码测试（假设两个目标div的id分别是a和b）：

<select class="form-control" name="attribute_pa_license" id="uniqueid">
  <option value="s-license" class="attached enabled">S License</option>
  <option value="e-license" class="attached enabled">E License</option>
</select>

<div id="a" class="license-content">S License 对应的内容</div>
<div id="b" class="license-content">E License 对应的内容</div>

方案一：使用jQuery实现 #

这种方式代码更简洁，适合已经引入jQuery的项目：

// 页面加载完成后执行
$(document).ready(function() {
  // 初始化：默认显示选中值对应的内容，同时添加初始类
  const initialValue = $('#uniqueid').val();
  toggleLicenseContent(initialValue);
  
  // 监听下拉选框的change事件
  $('#uniqueid').on('change', function() {
    const selectedValue = $(this).val();
    toggleLicenseContent(selectedValue);
  });
  
  // 封装核心逻辑：控制显示隐藏 + 类操作
  function toggleLicenseContent(value) {
    // 控制div的显示隐藏
    if (value === 's-license') {
      $('#a').show();
      $('#b').hide();
    } else if (value === 'e-license') {
      $('#a').hide();
      $('#b').show();
    }
    
    // 给下拉选框本身添加/移除类（如果是要给其他元素加类，替换选择器即可）
    $('#uniqueid').removeClass('s-license-selected e-license-selected').addClass(`${value}-selected`);
    
    // 也可以给显示的div添加激活类，隐藏的移除
    $('#a, #b').removeClass('active').filter(`#${value === 's-license' ? 'a' : 'b'}`).addClass('active');
  }
});

方案二：原生JavaScript实现 #

如果项目没有引入jQuery，用原生JS也能轻松搞定：

document.addEventListener('DOMContentLoaded', function() {
  const selectEl = document.getElementById('uniqueid');
  const divA = document.getElementById('a');
  const divB = document.getElementById('b');
  
  // 初始化
  toggleLicenseContent(selectEl.value);
  
  // 监听change事件
  selectEl.addEventListener('change', function() {
    toggleLicenseContent(this.value);
  });
  
  function toggleLicenseContent(value) {
    // 控制显示隐藏
    if (value === 's-license') {
      divA.style.display = 'block';
      divB.style.display = 'none';
    } else if (value === 'e-license') {
      divA.style.display = 'none';
      divB.style.display = 'block';
    }
    
    // 给下拉选框操作类
    selectEl.classList.remove('s-license-selected', 'e-license-selected');
    selectEl.classList.add(`${value}-selected`);
    
    // 给目标div添加激活类
    divA.classList.remove('active');
    divB.classList.remove('active');
    (value === 's-license' ? divA : divB).classList.add('active');
  }
});

小提示 #

• 如果你需要给其他元素添加/移除类，只需要把代码中的选择器（比如$('#uniqueid')或者selectEl）替换成你目标元素的选择器即可。
• 可以根据需求调整显示隐藏的方式：比如用addClass('hidden')/removeClass('hidden')替代show()/hide()，前提是你已经定义了.hidden { display: none; }的CSS样式。
• 初始化逻辑很重要，确保页面刚加载时就显示正确的内容，而不是等用户触发change事件才生效。

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