jQuery：监听多个Select组件变化并同步输出所有选中选项文本的实现方法

嘿，这个问题很好搞定！你当前的代码只捕获了触发change事件的那个下拉框的选中文本，完全没去读取另一个下拉框的状态，所以才会出现两个都选了却只显示最后操作的那个选项的情况。咱们只需要修改事件处理函数，每次触发时同时获取两个下拉框的选中内容就行啦。

下面是修改后的完整代码：

<h6>Choose Color</h6>
<select id="color_select" name="color" class="form-control" required="">
  <option value="" disabled="" selected="">Select</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="white">White</option>
</select>
<h6>Choose Size</h6>
<select id="size_select" name="size" class="form-control" required="">
  <option value="" disabled="" selected="">Select</option>
  <option value="small">Small</option>
  <option value="large">Large</option>
  <option value="medium">Medium</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#color_select, #size_select').on('change', function() {
    // 获取颜色下拉框的有效选中文本（跳过默认的"Select"选项）
    const selectedColor = $('#color_select option:selected').index() !== 0 
        ? $('#color_select option:selected').text() 
        : '';
    
    // 获取尺寸下拉框的有效选中文本（跳过默认的"Select"选项）
    const selectedSize = $('#size_select option:selected').index() !== 0 
        ? $('#size_select option:selected').text() 
        : '';
    
    // 整理并输出已选中的选项
    const selectedItems = [];
    if (selectedColor) selectedItems.push(selectedColor);
    if (selectedSize) selectedItems.push(selectedSize);
    
    // 根据选中情况输出结果
    if (selectedItems.length > 0) {
        console.log('已选中的选项：', selectedItems.join(' & '));
    } else {
        console.log('还未选中任何选项');
    }
}).change(); // 页面加载时触发一次，展示初始状态（不需要可以删除）
</script>

关键修改点说明： #

• 不再只依赖当前触发事件的元素：每次change事件触发时，主动查询两个下拉框的选中状态，而不是只看$(this)。
• 过滤默认选项：用index() !== 0判断是否选中了有效选项（跳过默认的"Select"），避免输出空内容。
• 统一收集输出：把所有已选中的选项收集到数组里，最后一起输出——不管是只选了颜色、只选了尺寸，还是两个都选了，都能正确展示所有已选内容。

这样修改后，不管你操作哪个下拉框，只要有选中的选项，都会把所有已选的内容一起输出啦～

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