У меня есть главное меню, и нажатие на кнопку главного меню открывает подменю с пунктами длинного или короткого списка. Выбор одного или нескольких элементов меняет оранжевую кнопку закрытия в левом верхнем углу на зеленую галочку. Если все элементы сняты, зеленая галочка снова превращается в оранжевую кнопку закрытия. Пока все хорошо!
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>
<script>
<!-- beginning dialog submenu -->
$(document).on("selectmenucreate", "#country-select", 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);
$(this).on("change", function () {
var cases = {"page": data.menuPageClose, "overlay": data.headerClose},
btnClose = cases[data.menuType];
if ($("option:selected", this).length === 0) {
btnClose
.addClass("ui-icon-delete")
.removeClass("ui-icon-check")
.css("backgroundColor", "orange")
.css("width", 32)
.css("height", 32)
.css("border", "orange solid 0px");
} else {
btnClose
.addClass("ui-icon-check")
.removeClass("ui-icon-delete")
.css("backgroundColor", "#90ee90")
.css("width", 55)
.css("height", 32)
.css("border", "green solid 1px");
}
});
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var data = $("#country-select").data("mobile-selectmenu");
if(ui.toPage.attr("id") == data["dialogId"]) {
if(!ui.toPage.find(".ui-filterable").length) {
ui.toPage.find(".ui-content").enhanceWithin();
}
}
});
$(document).on("pagecontainershow", function(e, ui) {
var data = $("#country-select").data("mobile-selectmenu");
if(ui.toPage.attr("id") == data["dialogId"]) {
ui.toPage.find(".ui-filterable input").focus();
}
});
$(document).on("pagecontainerhide", function(e, ui) {
var data = $("#country-select").data("mobile-selectmenu");
if(ui.prevPage.attr("id") == data["dialogId"]) {
data["list"].find("li").removeClass("ui-screen-hidden");
ui.prevPage.find(".ui-filterable input").val("");
}
});
<!-- end of dialog submenu -->
<!-- beginning of popup submenu -->
$(document).on("selectmenucreate", "#city-select", 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.popupId).enhanceWithin().popup("option", {positionTo: "window"});
$("#" + data.menuId).css("max-height", "0");
$(this).on("change", function () {
var cases = {"page": data.menuPageClose, "overlay": data.headerClose},
btnClose = cases[data.menuType];
if ($("option:selected", this).length === 0) {
btnClose
.addClass("ui-icon-delete")
.removeClass("ui-icon-check")
.css("backgroundColor", "orange")
.css("width", 32)
.css("height", 32)
.css("border", "orange solid 1px");
} else {
btnClose
.addClass("ui-icon-check")
.removeClass("ui-icon-delete")
.css("backgroundColor", "#90ee90")
.css("width", 55)
.css("height", 32)
.css("border", "green solid 1px");
}
});
});
$(document).on("popupbeforeposition", function(e, ui) {
var data = $("#city-select").data("mobile-selectmenu");
if(e.target.id == data.popupId) {
var popup = $("#" + data.popupId), sH = $.mobile.getScreenHeight(),
pH = popup.height(), oH = popup.outerHeight(true),
hH = popup.find(".ui-header").outerHeight(true),
fH = popup.find(".ui-filterable").outerHeight(true),
iH = popup.find("li").outerHeight(true),
maxItems = ((sH - oH + pH - hH - fH - 50) / iH)|0, maxHeight = maxItems * iH;
$("#" + data.menuId).css("max-height", maxHeight+"px");
popup.find(".ui-filterable input").focus();
}
});
$(document).on("popupafterclose", function(e, ui) {
var data = $("#city-select").data("mobile-selectmenu");
if(e.target.id == data.popupId) {
data.list.find("li").removeClass("ui-screen-hidden");
$(e.target).find(".ui-filterable input").val("");
$("#" + data.menuId).css("max-height", "0");
}
});
$(document).on("popupafteropen", function(e, ui) {
if(e.target.id == $("#city-select").data("mobile-selectmenu").popupId) {
$(e.target).find(".ui-filterable input").focus();
}
});
<!-- end of popup submenu -->
</script>
<style>
.ui-selectmenu.ui-popup .ui-input-search {
margin-left: .5em;
margin-right: .5em;
}
.ui-selectmenu.ui-dialog .ui-content {
padding-top: 0;
max-height: 85vh;
overflow-y: scroll;
}
.ui-selectmenu.ui-dialog .ui-selectmenu-list {
margin-top: 0;
}
.ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn {
border-top-width: 1px;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-selectmenu.ui-popup .ui-header {
border-bottom-width: 1px;
padding-left: 40px;
}
.ui-selectmenu.ui-dialog .ui-header {
border-bottom-width: 1px;
padding-left: 40px;
}
/* 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;
}
#city-select-listbox .ui-icon-delete,
#country-select-dialog .ui-icon-delete {
background-color: orange;
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<form id="form_mobile" name="form_mobile" action="filter_text32.php" method="post" data-ajax="false">
<input type="hidden" name="sent" value="yes">
<div class="action-button"><button style="background:lime; border-radius: 20px; height:40px; width:60px" type="submit" value="GO" name="submit" id="submit"><b>GO</b></button></div>
<div role="main" class="ui-content" style="background-color:#dae5f4;">
<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" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "AL") { echo "selected=\"selected\""; break;}}} ?>>Alabama</option>
<option value="AK" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "AK") { echo "selected=\"selected\""; break;}}} ?>>Alaska</option>
<option value="AZ" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "AZ") { echo "selected=\"selected\""; break;}}} ?>>Arizona</option>
<option value="AR" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "AR") { echo "selected=\"selected\""; break;}}} ?>>Arkansas</option>
<option value="CA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "CA") { echo "selected=\"selected\""; break;}}} ?>>California</option>
<option value="CO" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "CO") { echo "selected=\"selected\""; break;}}} ?>>Colorado</option>
<option value="CT" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "CT") { echo "selected=\"selected\""; break;}}} ?>>Connecticut</option>
<option value="DE" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "DE") { echo "selected=\"selected\""; break;}}} ?>>Delaware</option>
<option value="FL" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "FL") { echo "selected=\"selected\""; break;}}} ?>>Florida</option>
<option value="GA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "GA") { echo "selected=\"selected\""; break;}}} ?>>Georgia</option>
<option value="HI" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "HI") { echo "selected=\"selected\""; break;}}} ?>>Hawaii</option>
<option value="ID" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "ID") { echo "selected=\"selected\""; break;}}} ?>>Idaho</option>
<option value="IL" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "IL") { echo "selected=\"selected\""; break;}}} ?>>Illinois</option>
<option value="IN" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "IN") { echo "selected=\"selected\""; break;}}} ?>>Indiana</option>
<option value="IA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "IA") { echo "selected=\"selected\""; break;}}} ?>>Iowa</option>
<option value="KS" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "KS") { echo "selected=\"selected\""; break;}}} ?>>Kansas</option>
<option value="KY" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "KY") { echo "selected=\"selected\""; break;}}} ?>>Kentucky</option>
<option value="LA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "LA") { echo "selected=\"selected\""; break;}}} ?>>Louisiana</option>
<option value="ME" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "ME") { echo "selected=\"selected\""; break;}}} ?>>Maine</option>
<option value="MD" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "MD") { echo "selected=\"selected\""; break;}}} ?>>Maryland</option>
<option value="MA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "MA") { echo "selected=\"selected\""; break;}}} ?>>Massachusetts</option>
<option value="MI" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "MI") { echo "selected=\"selected\""; break;}}} ?>>Michigan</option>
<option value="MN" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "MN") { echo "selected=\"selected\""; break;}}} ?>>Minnesota</option>
<option value="MS" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "MS") { echo "selected=\"selected\""; break;}}} ?>>Mississippi</option>
<option value="MO" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "MO") { echo "selected=\"selected\""; break;}}} ?>>Missouri</option>
<option value="MT" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "MT") { echo "selected=\"selected\""; break;}}} ?>>Montana</option>
<option value="NE" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "NE") { echo "selected=\"selected\""; break;}}} ?>>Nebraska</option>
<option value="NV" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "NV") { echo "selected=\"selected\""; break;}}} ?>>Nevada</option>
<option value="NH" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "NH") { echo "selected=\"selected\""; break;}}} ?>>New Hampshire</option>
<option value="NJ" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "NJ") { echo "selected=\"selected\""; break;}}} ?>>New Jersey</option>
<option value="NM" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "NM") { echo "selected=\"selected\""; break;}}} ?>>New Mexico</option>
<option value="NY" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "NY") { echo "selected=\"selected\""; break;}}} ?>>New York</option>
<option value="NC" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "NC") { echo "selected=\"selected\""; break;}}} ?>>North Carolina</option>
<option value="ND" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "ND") { echo "selected=\"selected\""; break;}}} ?>>North Dakota</option>
<option value="OH" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "OH") { echo "selected=\"selected\""; break;}}} ?>>Ohio</option>
<option value="OK" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "OK") { echo "selected=\"selected\""; break;}}} ?>>Oklahoma</option>
<option value="OR" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "OR") { echo "selected=\"selected\""; break;}}} ?>>Oregon</option>
<option value="PA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "PA") { echo "selected=\"selected\""; break;}}} ?>>Pennsylvania</option>
<option value="RI" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "RI") { echo "selected=\"selected\""; break;}}} ?>>Rhode Island</option>
<option value="SC" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "SC") { echo "selected=\"selected\""; break;}}} ?>>South Carolina</option>
<option value="SD" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "SD") { echo "selected=\"selected\""; break;}}} ?>>South Dakota</option>
<option value="TN" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "TN") { echo "selected=\"selected\""; break;}}} ?>>Tennessee</option>
<option value="TX" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "TX") { echo "selected=\"selected\""; break;}}} ?>>Texas</option>
<option value="UT" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "UT") { echo "selected=\"selected\""; break;}}} ?>>Utah</option>
<option value="VT" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "VT") { echo "selected=\"selected\""; break;}}} ?>>Vermont</option>
<option value="VA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "VA") { echo "selected=\"selected\""; break;}}} ?>>Virginia</option>
<option value="WA" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "WA") { echo "selected=\"selected\""; break;}}} ?>>Washington</option>
<option value="WV" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "WV") { echo "selected=\"selected\""; break;}}} ?>>West Virginia</option>
<option value="WI" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "WI") { echo "selected=\"selected\""; break;}}} ?>>Wisconsin</option>
<option value="WY" <?php if(isset($_POST["country-select"])) { foreach($_POST["country-select"] as $tmp) { if($tmp == "WY") { echo "selected=\"selected\""; break;}}} ?>>Wyoming</option>
</select>
</div>
<div class="ui-field-contain">
<label for="country-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" <?php if(isset($_POST["city-select"])) { foreach($_POST["city-select"] as $tmp) { if($tmp == "LA") { echo "selected=\"selected\""; break;}}} ?>>Los Angeles</option>
<option value="NY" <?php if(isset($_POST["city-select"])) { foreach($_POST["city-select"] as $tmp) { if($tmp == "NY") { echo "selected=\"selected\""; break;}}} ?>>New York</option>
<option value="SF" <?php if(isset($_POST["city-select"])) { foreach($_POST["city-select"] as $tmp) { if($tmp == "SF") { echo "selected=\"selected\""; break;}}} ?>>San Francisco</option>
<option value="WH" <?php if(isset($_POST["city-select"])) { foreach($_POST["city-select"] as $tmp) { if($tmp == "WH") { echo "selected=\"selected\""; break;}}} ?>>Washington</option>
</select>
</div>
</div>
</form>
После отправки страницы выбранные значения сохраняются, однако стиль кнопки закрытия - нет. Это должен быть зеленый флажок, если выбран хотя бы один элемент.
Спасибо!