2016-07-22 54 views
0

如何防止optgroups中的多個選擇ios safari。 iOS Safari瀏覽器中的多個選項可以選擇多個選項。但我只需要在各組中進行一次選擇。如何防止optgroups中的多個選擇ios safari

在選定的選項後,應關閉下拉菜單。 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>

回答

0

你只需要手動模糊的元素,兩個問題都將迎刃而解:

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

codepen