优化双下拉框显隐div的jQuery代码及重置功能咨询

一、核心优化点 #

• 下拉框重置逻辑：切换任意下拉框时，自动重置其他所有下拉框到默认选项
• 代码结构优化：将判断逻辑抽离为配置数组，后续扩展仅需新增配置，无需修改核心逻辑

二、优化后完整代码 #

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select title="Select 1" id="select1">
  <option value="">Select an option</option>
  <option value="Ins1">250-500</option>
  <option value="Ins2">500-750</option>
</select>
<select title="Select 2" id="select2">
  <option value="">Select an option</option>
  <option value="Ind1">Option 1</option>
  <option value="Ind2">Option 2</option>
</select>

<p class="bfcn" style="display: none;">500-750 and Option 1</p>
<p class="abc" style="display: none;">250-500 and Option 1</p>
<p class="cba" style="display: none;">500-750 and Option 2</p>
<p class="xyz" style="display: none;">250-500 and Option 2</p>

JavaScript 部分 #

$(document).ready(function() {
  // 配置数组：存储所有下拉框组合与目标元素的对应关系
  const displayConfig = [
    { selectValues: { select1: 'Ins2', select2: 'Ind1' }, target: '.bfcn' },
    { selectValues: { select1: 'Ins1', select2: 'Ind1' }, target: '.abc' },
    { selectValues: { select1: 'Ins2', select2: 'Ind2' }, target: '.cba' },
    { selectValues: { select1: 'Ins1', select2: 'Ind2' }, target: '.xyz' }
  ];

  // 获取所有下拉框元素
  const $selects = $('select');

  $selects.on('change', function() {
    // 1. 重置其他下拉框到默认选项
    $selects.not(this).val('');

    // 2. 先隐藏所有目标元素
    $('.bfcn, .abc, .cba, .xyz').hide();

    // 3. 获取当前所有下拉框的选中值
    const currentValues = {};
    $selects.each(function() {
      currentValues[this.id] = $(this).val();
    });

    // 4. 遍历配置，匹配则显示对应元素
    displayConfig.forEach(config => {
      let isMatch = true;
      for (const selectId in config.selectValues) {
        if (currentValues[selectId] !== config.selectValues[selectId]) {
          isMatch = false;
          break;
        }
      }
      if (isMatch) {
        $(config.target).show();
      }
    });
  });
});

三、扩展说明 #

当需要新增下拉框或判断规则时：

1. 新增下拉框：在HTML中添加新的select标签，确保设置唯一id
2. 新增判断规则：在displayConfig数组中添加新的配置对象，格式为：

{ selectValues: { 下拉框ID1: '对应值', 下拉框ID2: '对应值', ... }, target: '目标元素选择器' }

3. 简化隐藏操作：可以给所有目标元素添加通用类（如target-section），将隐藏逻辑改为$('.target-section').hide();，无需每次新增元素都修改选择器

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