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

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 。

Answer 2

你可以使用本地存储

// set value of dropdown into local storage
localStorage.setItem("StorageName", "DropDownValue"); 

// retrieve value from local storage
var ddlValue = localStorage.getItem("StorageName");

Answer 3

通过PHP可以实现，而您做错了select元素不具有值属性：

因此，首先删除值属性：

<select name="mod_simpleemailform_field1_1" id="mod_simpleemailform_field1_1" 
class="mod_sef_input_select select" value="<?php echo $day; ?>">

并在option标签上使用selected属性。

<select name="mod_simpleemailform_field1_1" id="mod_simpleemailform_field1_1" 
class="mod_sef_input_select select">
<option value="">Day</option>
<?php
for($i = 1; $i <= 10; $i++) {
    if($day == $i) {
        echo '<option selected="selected">' . $i . '</option>';
    } else {
        echo '<option>' . $i . '</option>';
    }
}
</select>