问题
I have a main menu and a click on a button of the main menu opens a sub menu with either long or short list items. Selecting one or more items changes the orange close button in the left upper corner to a green check mark. If all items get unselected the green check mark turns back into the orange close button. So far, so good!
<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>
After submitting the page the selected values are kept, however, the style of the close button is not. It should still be the green check mark when at least one item was selected.
Thanks!
来源：https://stackoverflow.com/questions/60928498/how-to-keep-style-of-close-button-in-submenu-of-jquery-mobile-after-submit