Wie zu verhindern, Mehrfachauswahl in optgroups ios Safari

Question

Wie zu verhindern, dass mehrere in optgroups ios Safari zu wählen. In iOS-Safari können mehrere Optionen in verschiedenen optgroups ausgewählt werden. Aber ich brauche nur eine Auswahl zwischen den Gruppen.

Nach der ausgewählten Option sollte das Dropdown-Menü geschlossen werden. 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>

Answer 1

Sie müssen nur das Element manuell verwischen, die beide Probleme gelöst werden:

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

codepen