How to control the "select" element with JavaScript on iOS WebKit

If you are developing your custom UIs for mobile, you can hide the native select element and show your own hand-crafted dropdown control and selection list.

But I like the native selection list. I just want to replace and customize the dropdown control.

This is perfectly possible, you can control the open/close of the native element with focus/blur events:

var $openSelectionList = $("#openSelectionList");
var $selectionList = $("#selectionList");

$openSelectionList.on("touchend", function() {
      $selectionList[0].focus();
});

$selectionList.on("blur", function() {
    $openSelectionList.html(this.selectedIndex);
});