Из документации JQM:
Меню пользовательского выбора
Пользовательский выбор использует всплывающее окно со списком для отображения меню. Для длинных списков будет использоваться диалог.
Если вам нужно вставить некоторые элементы внутрь и прокрутить только длинный список элементов, каркас всегда будет отображать всплывающее окно, потому что итоговая общая высота элементы списка никогда не будут превышать высоту экрана.
Итак, проблема здесь в том, чтобы вычислить максимальную высоту представления подменю-списка, которая не превышает высоту экрана, чтобы сообщить платформе, что прокручиваемая страница диалога здесь больше не нужна.
РЕДАКТИРОВАТЬ: Исправление для мобильного всплывающего окна repoTo: "origin" при изменении размера окна
$(document).on("selectmenucreate", "select[data-native-menu=false]", function(e, ui) {
var data = $(this).data("mobile-selectmenu"), hide = {"display": "none"};
data.list.attr("data-filter", "true").find("li[data-placeholder='true']").css(hide);
$("#" + data.menuId).css("max-height", "0");
$("#" + data.popupId)
.enhanceWithin()
.popup("option", {positionTo: data.button, history: false})
.data('mobile-popup').renderData = {selectId: this.id, mH: 0, hH: 0, fH: 0, iH: 0};
$(this).on("change", function () {
if ($("option:selected", this).length === 0) {
data.headerClose.addClass("ui-icon-delete").removeClass("ui-icon-check");
} else {
data.headerClose.addClass("ui-icon-check").removeClass("ui-icon-delete");
}
});
});
$(document).on("popupbeforeposition", function(e, ui) {
var popup = $(e.target), data = popup.data("mobile-popup"), rD = data.renderData;
if(rD) {
var select = $("#" + rD.selectId);
var sH = $.mobile.getScreenHeight();
if (rD.iH === 0) {
rD.mH = popup.outerHeight(true) - popup.height();
rD.hH = popup.find('.ui-header').outerHeight(true);
rD.fH = popup.find('.ui-filterable').outerHeight(true);
rD.iH = popup.find('li').outerHeight(true);
}
var maxItems = ((sH - rD.mH - rD.hH - rD.fH - 50) / rD.iH)|0,
maxHeight = maxItems * rD.iH;
select.data("mobile-selectmenu").list.css("max-height", maxHeight+"px");
}
});
$(document).on("popupafterclose", function(e, ui) {
var popup = $(e.target), data = popup.data("mobile-popup"), rD = data.renderData;
if(rD) {
popup.find("li").removeClass("ui-screen-hidden");
popup.find(".ui-filterable input").val("");
$("#" + rD.selectId).data("mobile-selectmenu").list.css("max-height", "0");
}
});
/* scrollable listview for select popup */
.ui-selectmenu-list.ui-listview {
overflow-x: hidden;
overflow-y: auto;
}
/* just some air around the popup */
.ui-selectmenu.ui-popup {
padding: 0.6em;
}
.ui-selectmenu .ui-header .ui-icon-delete {
background-color: orange !important;
border: 1px solid red !important;
}
.ui-selectmenu .ui-header .ui-icon-check {
background-color: #90ee90 !important;
border: 1px solid green !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script>
$( document ).on( "mobileinit", function() {
$.widget( "mobile.popup", $.mobile.popup, {
_resizeTimeout: function() {
if ( this._isOpen ) {
if ( !this._expectResizeEvent() ) {
if ( this._ui.container.hasClass( "ui-popup-hidden" ) ) {
this._ui.container.removeClass( "ui-popup-hidden ui-popup-truncate" );
this.reposition( { positionTo: this.options.positionTo } ); /* hotfix */
this._ignoreResizeEvents();
}
this._resizeScreen();
this._resizeData = null;
this._orientationchangeInProgress = false;
}
} else {
this._resizeData = null;
this._orientationchangeInProgress = false;
}
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="page-select-country">
<div data-role="content">
<div class="ui-field-contain">
<label for="country-select">Select Country</label>
<select name="country-select" id="country-select" multiple="multiple" data-native-menu="false">
<option>Choose Your Country</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
</select>
</div>
<div class="ui-field-contain">
<label for="city-select">Select City</label>
<select name="city-select" id="city-select" multiple="multiple" data-native-menu="false">
<option>Choose Your City</option>
<option value="LA">Los Angeles</option>
<option value="NY">New York</option>
<option value="SF">San Francisco</option>
<option value="WH">Washington</option>
</select>
</div>
</div>
</div>
</body>
</html>
Только заметка в стороне: всплывающее окно также можно закрыть, нажав клавишу ES C или нажав / нажав на нее снаружи.