如何防止在optgroups ios safari中进行多项选择

时间:2016-07-22 13:36:18

标签: javascript jquery html ios safari

如何防止在optgroups ios safari中进行多项选择。可以在iOS Safari中的optgroups中选择多个选项。但我只需要在整个小组中进行一次选择。

在选定的选项之后,应关闭下拉列表。 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 个答案:

答案 0 :(得分:0)

您只需手动模糊元素,这两个问题都将得到解决:

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

codepen