下拉框切换选项后id为condition-description-sec的div无法显示问题求解

问题原因 #

• 原有代码仅在页面初始化时执行一次，没有绑定下拉框的选择变化监听事件，切换选项时无法重新触发显隐逻辑
• 代码固定读取了下拉框第二个选项的静态值做判断，没有获取当前选中项的状态，判断逻辑不会跟随操作变化

解决方案 #

将逻辑改为监听下拉框的change事件，每次切换选项时获取当前选中项的索引做判断，同时页面初始化时执行一次逻辑匹配默认选中状态，完整可运行代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name="condition_id" id="condition-select">
    <option value="">Select Condition</option>                 
    <option value="1000/New with tags" selected>New with tags</option>
    <option value="1500/New without tags">New without tags</option>
    <option value="1750/New with defects">New with defects</option>
    <option value="3000/Used">Used</option>
</select>

<div id="condition-description-sec">
  <p>Lorem ipsum dolor amet</p>
</div>

<script>
$(function() {
  // 封装显隐判断逻辑
  function toggleDescription() {
    // 下拉框选项索引从0开始计数，第二个选项对应索引为1
    const currentSelectedIndex = $('#condition-select')[0].selectedIndex
    currentSelectedIndex === 1 ? $('#condition-description-sec').hide() : $('#condition-description-sec').show()
  }
  // 页面加载时执行一次，匹配初始默认选中状态
  toggleDescription()
  // 绑定下拉框变化事件，每次切换选项都重新判断
  $('#condition-select').on('change', toggleDescription)
})
</script>

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