如何防止 optgroups ios Safari 中的多项选择

Posted 2023-02-23

【中文标题】如何防止 optgroups ios Safari 中的多项选择

【英文标题】：How to prevent multiple select in optgroups ios safari

【发布时间】：2016-07-22 13:36:17

【问题描述】：

如何防止 optgroups ios Safari 中的多选。可以在 iOS Safari 中跨 optgroup 选择多个选项。但我只需要在各组中选择一个。

选择选项后，下拉菜单应关闭。 https://codepen.io/MP3en/pen/GqxzEJ

$('body').on('change', 'select', function(e) 
  console.log(e.currentTarget);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-config-option="size">
  <optgroup label="3:2">
    <option value="30_20">30×20 cm</option>
    <option value="45_30">45×30 cm</option>
    <option value="60_40">60×40 cm</option>
    <option value="75_50">75×50 cm</option>
    <option class="selected" value="90_60">90×60 cm</option>
    <option value="120_80">120×80 cm</option>
    <option value="150_100">150×100 cm</option>
    <option value="180_120">180×120 cm</option>
    <option value="210_140">210×140 cm</option>
    <option value="225_150">225×150 cm</option>
  </optgroup>
  <optgroup label="4:3">
    <option value="40_30">40×30 cm</option>
    <option value="60_45">60×45 cm</option>
    <option value="80_60">80×60 cm</option>
    <option value="120_90">120×90 cm</option>
    <option value="160_120">160×120 cm</option>
    <option value="180_135">180×135 cm</option>
    <option value="200_150">200×150 cm</option>
  </optgroup>
  <optgroup label="Panorama-Format">
    <option value="60_20">60×20 cm</option>
    <option value="80_20">80×20 cm</option>
    <option value="100_20">100x20 cm</option>
    <option value="90_30">90×30 cm</option>
    <option value="120_40">120×40 cm</option>
    <option value="150_50">150×50 cm</option>
    <option value="180_60">180×60 cm</option>
    <option value="210_70">210×70 cm</option>
    <option value="240_80">240×80 cm</option>
    <option value="270_90">270×90 cm</option>
    <option value="300_100">300×100 cm</option>
  </optgroup>
  <optgroup label="Quadratisches Format">
    <option value="20_20">20×20 cm</option>
    <option value="30_30">30×30 cm</option>
    <option value="40_40">40×40 cm</option>
    <option value="50_50">50×50 cm</option>
    <option value="60_60">60×60 cm</option>
    <option value="70_70">70×70 cm</option>
    <option value="80_80">80×80 cm</option>
    <option value="90_90">90×90 cm</option>
    <option value="100_100">100×100 cm</option>
    <option value="120_120">120×120 cm</option>
    <option value="140_140">140×140 cm</option>
    <option value="150_150">150×150 cm</option>
  </optgroup>
  <optgroup label="Standard-Format">
    <option value="50_40">50×40 cm</option>
    <option value="60_50">60×50 cm</option>
    <option value="70_50">70×50 cm</option>
    <option value="100_70">100×70 cm</option>
    <option value="100_80">100×80 cm</option>
  </optgroup>
</select>

【参考方案1】：

你只需要手动模糊元素，这两个问题都会解决：

$('body').on('change', 'select', function(e) 
  $(this).blur();
);

codepen