PowerApps如何过滤AvailableSeats下拉框，隐藏BookedSeats中存在的席位

根据你的需求，核心思路是先提取已预订席位的名称集合，再遍历可用席位选项，隐藏匹配的项。以下是不同技术栈的实现方式：

原生 JavaScript 实现 #

适合纯前端静态页面场景：

// 获取两个下拉框DOM元素
const availableSeats = document.getElementById('AvailableSeats');
const bookedSeats = document.getElementById('BookedSeats');

// 提取所有已预订席位的名称，存入Set提升查找效率
const bookedSeatNames = new Set(
  Array.from(bookedSeats.options).map(opt => opt.textContent)
);

// 遍历可用席位，隐藏已存在的选项
Array.from(availableSeats.options).forEach(opt => {
  if (bookedSeatNames.has(opt.textContent)) {
    opt.style.display = 'none';
  }
});

如果需要在已预订席位变化时自动更新，可将代码封装为函数，绑定到BookedSeats的change事件上。

jQuery 实现 #

若项目依赖jQuery，代码更简洁：

// 提取已预订席位名称数组
const bookedNames = $('#BookedSeats option').map(function() {
  return $(this).text();
}).get();

// 过滤并隐藏可用席位中匹配的选项
$('#AvailableSeats option').filter(function() {
  return bookedNames.includes($(this).text());
}).hide();

Vue.js 响应式实现 #

如果是Vue项目，推荐通过数据过滤而非直接操作DOM：

// 组件数据定义
data() {
  return {
    availableSeats: [
      { SeatName: 'A1' },
      { SeatName: 'A2' },
      { SeatName: 'B1' }
    ],
    bookedSeats: [
      { SeatName: 'A2' },
      { SeatName: 'B1' }
    ]
  };
},
computed: {
  filteredAvailableSeats() {
    const bookedSet = new Set(this.bookedSeats.map(item => item.SeatName));
    return this.availableSeats.filter(seat => !bookedSet.has(seat.SeatName));
  }
}

模板渲染：

<select id="AvailableSeats">
  <option v-for="seat in filteredAvailableSeats" :key="seat.SeatName">
    {{ seat.SeatName }}
  </option>
</select>

<select id="BookedSeats">
  <option v-for="seat in bookedSeats" :key="seat.SeatName">
    {{ seat.SeatName }}
  </option>
</select>

这种方式会自动响应bookedSeats的数据变化，无需手动操作DOM。

注意事项 #

• 若席位名称存在于选项的value属性而非文本内容，将代码中的textContent/text()替换为value即可。
• 若是其他框架（如React），核心逻辑一致：先构建已预订名称集合，再过滤可用席位数据后渲染。

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