Select Menu Test from iOS

Enabling Safari Web Inspector for iOS Devices: 1. On iOS device, go to: Setings » Safari » Advanced and enable Web Inspector. 2. On desktop Safari, go to: Preferences » Advanced and check "Show Developer menu in menu bar". A new menu item named "Develop" will be added to you Safari menu. 3. Connect your iOS device to your computer via USB. 4. Open the page you want to debug (an external or localhost URL). 5. From the desktop Safari Develop menu, select the name of your device and then click the application name in the submenu.

by onury

HTML

<select id="my-select" onfocus="checkSelectedIndex()" onblur="selectDone()">
    <option>Option 1</option>
    <option>Option 2</option>
</select>
<br /><br />
<i>See Web Inspector console for logs...</i>




<br /><br />
<div style="font-size:11px">
<b>Enabling Safari Web Inspector for iOS Devices:</b>
<br />
<ol>
    <li>On iOS device, go to: Setings » Safari » Advanced and enable Web Inspector.</li>
    <li>On desktop Safari, go to: Preferences » Advanced and check "Show Developer menu in menu bar". A new menu item named "Develop" will be added to you Safari menu.</li>
    <li>Connect your iOS device to your computer via USB.</li>
    <li>Open the page you want to debug (an external or localhost URL).</li>
    <li>From the desktop Safari Develop menu, select the name of your device and then click the application name in the submenu.</li>
</ol>
</div>

JavaScript

var timer;
// timer setup on focus
window.checkSelectedIndex = function () {
    timer = window.setInterval(function () {
        console.log('selected index:', document.getElementById('my-select').selectedIndex);
    }, 500); // 2 polls per second
};

// timer cleared on blur
window.selectDone = function () {
    console.log('Selection changed:', document.getElementById('my-select').selectedIndex);
    if (!timer) { return; }
    window.clearInterval(timer);
};