javascript - 如何在页面重新加载后保留下拉值？

Question

如何在页面重新加载后保留我的下拉值？提交后表单将重新加载并验证错误。现在我只想在表单出错后保留下拉值。

if(isset($_POST['mod_simpleemailform_submit_1']))
{
$day = $_POST['mod_simpleemailform_field1_1'];
$month = $_POST['mod_simpleemailform_field2_1'];
$year = $_POST['mod_simpleemailform_field3_1'];
$time = $_POST['mod_simpleemailform_field4_1'];
$guest = $_POST['mod_simpleemailform_field5_1'];
$name = $_POST['mod_simpleemailform_field6_1'];
$email = $_POST['mod_simpleemailform_field7_1'];
$menu = $_POST['mod_simpleemailform_field8_1'];
$inquiry = $_POST['mod_simpleemailform_field9_1'];

if(!$day)
{
$dayError = "Please enter a value for required field: Day";
}

if(!$month)
{
$monthError = "Please enter a value for required field: Month";
}

if(!$year)
{
$yearError = "Please enter a value for required field: Year";
}

if(!$time)
{
$timeError = "Please enter a value for required field: Time";
}

if(!$guest)
{
$guestError = "Please enter a value for required field: Guest";
}

if(!$name)
{
$nameError = "Please enter a value for required field: Name";
}
if($name!="")
{
if(!letter($name)) { $nameError .= "Please enter letters only for Name";}
}

if(!$email)
{
$emailError = "Please enter a value for required field: Email";
}
if($email!="")
{
if(!isemail($email)) { $emailError .= "Please enter a invalid Email";}
}

if(!$menu)
{
$menuError = "Please enter a value for required field: Menu";
}

if(!$inquiry)
{
$inquiryError = "Please enter a value for required field: Message";
}

if($dayError=="" && $monthError=="" && $yearError=="" && $timeError=="" && $guestError=="" && $nameError=="" && $emailError=="" && $menuError=="" && $inquiryError=="")
{
$to = "joomla.hbtest@gmail.com";
$subj = "Beledutung Inquiry Form";
$msg = "\n\n";
$msg .= "Date: ".$day." / ".$month." / ".$year."\n";
$msg .= "Time: ".$time."\n";
$msg .= "Guest: ".$guest."\n";
$msg .= "Name: ".$name."\n";
$msg .= "Email: ".$email."\n";
$msg .= "Menu: ".$menu."\n";
$msg .= "----------------------------------------------\n\n";
$msg .= "Message: ".$inquiry."\n";

$head = "From: \"$name\" <$name>\n";
$head .= "Reply-To: \"$email\" <$email>\n";
$head .= "Return-Path: \"$email\" <$email>\n";

if(mail($to,$subj,$msg,$head))
{
?>
<script type="text/javascript">
alert("Your message has been sent we will come back to you shorty.");
window.location = "booking.php";
</script>
<?php 
}
}
}
?>

<form method="post" action="booking.php" name="_SimpleEmailForm_1" id="_SimpleEmailForm_1" enctype="multipart/form-data" class="tt-form booking-form padding-top margin-top">
<table class="mod_sef_table">
<tbody></tbody>
<div id="message">
<div class="error"><?php echo $dayError;?></div>
<div class="error"><?php echo $monthError;?></div>
<div class="error"><?php echo $yearError;?></div>
<div class="error"><?php echo $timeError;?></div>
<div class="error"><?php echo $guestError;?></div>
<div class="error"><?php echo $nameError;?></div>
<div class="error"><?php echo $emailError;?></div>
<div class="error"><?php echo $menuError;?></div>
<div class="error"><?php echo $inquiryError;?></div>
</div>
<div class="row1 row form-row">
<tr class="mod_sef_tr col-md-2 column no-padding">
<th align="center" style="text-align:center;" class="mod_sef_th">Day</th>
<td class="mod_sef_space" width="5">&nbsp;</td>
<td class="mod_sef_td input-cover contact-line" id="store">
<select name="mod_simpleemailform_field1_1" id="mod_simpleemailform_field1_1" class="mod_sef_input_select select" value="<?php echo $day; ?>">
<option value="">Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</tr>
</div>
</table>
</html>

Answer 1

您可以使用localStorage来存储选定的值:

$('#mod_simpleemailform_field1_1').on('change', function() {
    // Save value in localstorage
    localStorage.setItem("mod_simpleemailform_field1_1", $(this).val());
});

页面刷新时，从 localStorage 获取值并将其设置为 select:

$(document).ready(function() {
    if ($('#mod_simpleemailform_field1_1').length) {
        $('#mod_simpleemailform_field1_1').val(localStorage.getItem("mod_simpleemailform_field1_1"));
    }
});

并非所有浏览器都支持

localStorage。您可以使用 shims 来实现此目的，或者回退到 cookie。