点击按钮与下拉选项切换显示不同文本的功能故障求助

别担心呀，刚开始写JavaScript遇到这种情况太正常了～咱们先看看问题出在哪，再一步步把代码理顺。

你的核心需求很清晰：点击Open按钮显示文本1，通过下拉选择切换对应文本，点击Close按钮隐藏所有文本。现在代码不工作的主要原因是你给下拉框绑定了多个重复的change事件，而且每个事件还先强行设置了下拉框的值，这就导致事件逻辑混乱，根本没法正确触发对应的文本切换。

我帮你把代码优化了一下，既实现需求又精简了逻辑：

HTML部分（和你的原代码一致，无需改动） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button id="open">Open</button>
<button id="close">Close</button>

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div>
  <div id="Text1">Show text 1</div>
  <div id="Text2">Show text 2</div>
  <div id="Text3">Show text 3</div>
  <div id="Text4">Show text 4</div>
  <div id="Text5">Show text 5</div>
</div>

CSS部分（保留原逻辑，没问题） #

#Text1,
#Text2,
#Text3,
#Text4,
#Text5 {
  opacity: 0;
  visibility: hidden;
}

#Text1.visible,
#Text2.visible,
#Text3.visible,
#Text4.visible,
#Text5.visible {
  opacity: 1;
  visibility: visible;
}

JavaScript部分（优化后） #

$(document).ready(function($) {
  // 点击Open按钮：显示Text1，同时同步下拉框选中状态
  $('#open').on('click', function() {
    $('#select').val('1');
    hideAllTexts();
    $('#Text1').addClass('visible');
  });

  // 点击Close按钮：隐藏所有文本，重置下拉框
  $('#close').on('click', function() {
    hideAllTexts();
    $('#select').val('1');
  });

  // 下拉框切换：根据选中值显示对应文本
  $('#select').on('change', function() {
    const selectedValue = $(this).val();
    hideAllTexts();
    $(`#Text${selectedValue}`).addClass('visible');
  });

  // 封装隐藏所有文本的函数，避免重复代码
  function hideAllTexts() {
    $('#Text1, #Text2, #Text3, #Text4, #Text5').removeClass('visible');
  }
});

优化点说明： #

• 把所有代码放在一个$(document).ready里，没必要重复绑定多次
• 封装了hideAllTexts函数，避免每次都重复写移除所有类的代码
• 下拉框只绑定一个change事件，通过选中的value动态找到对应的文本元素，逻辑更清晰
• Open按钮点击时同步下拉框的选中状态，避免显示的文本和下拉选项不一致的情况

这样调整后，功能就能正常工作啦，而且代码也简洁了很多～

备注：内容来源于stack exchange，提问作者Yash