选择器 - 选中时暂时禁用选项

Question

是否可以在 select 选项处于活动状态时将其禁用？我有一个 selector，它有各种选项，每个选项都会触发一个 SQL 查询。如果相同的选项被 selected 两次，地图就会中断。我认为最简单的解决方案是在 selected 后禁用一个选项。

<select id="sql" onclick="updateSource()" class="selector"> 
    <option value="SELECT * FROM indicators WHERE 1=0" disabled selected>Select an Indicator</option>     
    <option value="SELECT * FROM indicators WHERE grain ILIKE 'Yes'">Change in grain (maize, wheat & barley) production</option>
    <option value="SELECT * FROM indicators WHERE sorghum ILIKE 'Yes'">Change in Sorghum production</option>
</select>

Answer 1

如果我没理解错的话，您想在 option 被选中后禁用它吗？

function updateSource(e) {
  const target = e[e.value];
  target.disabled = true;
}

<select onchange="updateSource(this)">
  <option value="0" disabled selected>Select an Indicator</option>
  <option value="1">Change in grain (maize, wheat & barley) production</option>
  <option value="2">Change in Sorghum production</option>
</select>

还是应该只禁用当前选中的那个？

function updateSource(e) {
  Object.keys(e).forEach(k => e[k].disabled = false);
  const target = e[e.value];
  target.disabled = true;
}

<select onchange="updateSource(this)">
  <option value="0" disabled selected>Select an Indicator</option>
  <option value="1">Change in grain (maize, wheat & barley) production</option>
  <option value="2">Change in Sorghum production</option>
</select>

选择器 - 选中时暂时禁用选项

Selector - Temporarily disable an option while selected

javascript

selector