[英]How to keep the selected onchange dropdown list value after submit
我有三个下拉列表,即国家、州和城市。 首先,国家下拉菜单将显示所有国家。 When a country would be chosen, the respective states would be fetched from the MySQL database and appear in the states dropdown. 与选择州类似,将从 MySQL 数据库中获取相应的城市并显示在城市下拉列表中。
以下是我选择国家、州、城市并单击提交按钮之前的默认显示。
在我选择国家、州、城市并单击提交按钮后,如下所示。 它将刷新并返回默认显示。
那么如何在下拉列表中保留所选值(英国,英格兰,伦敦)显示,而不是在单击提交按钮后跳回默认显示?
索引.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.select-boxes{width: 280px;text-align: center;}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
});
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
}
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="get" action="<?php echo $_SERVER['PHP_SELF'];?>">
<?php
//Include database configuration file
include('dbConfig.php');
//Get all country data
$query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");
//Count total number of rows
$rowCount = $query->num_rows;
?>
<select name="country" id="country">
<option value="">Select Country</option>
<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
}
}else{
echo '<option value="">Country not available</option>';
}
?>
</select>
<select name="state" id="state">
<option value="">Select country first</option>
</select>
<select name="city" id="city">
<option value="">Select state first</option>
</select>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</body>
</html>
ajaxData.php
<?php
//Include database configuration file
include('dbConfig.php');
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
//Get all state data
$query = $db->query("SELECT * FROM states WHERE country_id IN (".$_POST['country_id'].")");
//Count total number of rows
$rowCount = $query->num_rows;
//Display states list
if($rowCount > 0){
echo '<option value="">Select state</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
}
}else{
echo '<option value="">State not available</option>';
}
}
if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
//Get all city data
$query = $db->query("SELECT * FROM cities WHERE state_id IN(".$_POST["state_id"].")");
//Count total number of rows
$rowCount = $query->num_rows;
//Display cities list
if($rowCount > 0){
echo '<option value="">Select city</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}else{
echo '<option value="">City not available</option>';
}
}
?>
dbConfig.php
<?php
//db details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'location_db';
//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
?>
首先这样做:
<select name="country" id="country">
<option value="">Select Country</option>
<?php
$selectedCountry = filter_input(INPUT_POST, "country");
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['country_id'].'" '.($selectedCountry==$row['country_id']?"selected='selected'":"").'>'.$row['country_name'].'</option>';
}
}else{
echo '<option value="">Country not available</option>';
}
?>
</select>
然后在您的文档就绪事件中执行以下操作:
<script type="text/javascript">
$(document).ready(function(){
$("#country").one("finishedLoading", function () {
setTimeout(function () {$("#state").val("<?= (filter_input(INPUT_POST,"state")?:"[]") ?>").trigger("change")},10);
});
$("#state").one("finishedLoadingState", function () {
setTimeout(function () { $("#city").val("<?= (filter_input(INPUT_POST,"city")?:"[]") ?>").trigger("change") }, 10);
});
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
$("#country").trigger("finishedLoading"); //Little custom event we can listen for
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
$("#country").trigget("finishedLoading");
}
}).trigger("change"); //Trigger immediately in case there's a value pre-selected
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
$("#state").trigger("finishedLoadingState");
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
$("#state").trigger("finishedLoadingState");
}
});
这个想法是您以与用户相同的方式链接触发“更改”事件。
你可以使用隐藏文件来做到这一点
<input type="hidden" name="selectedoption" value="<?php echo !empty($_POST['selectedoption']) ? strip_tags($_POST['selectedoption']) : ''; ?>" />
<select id="sortSelect" class="selctedcls" size="1" name="selectedoption" onchange="this.form.submit();" >
<option selected>value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
</select>
<script type="text/javascript">
document.getElementById('selctedcls').value ="<?php if(! $_POST['selectedoption']):?>"selectedoption"<?php else: echo $_POST['selectedoption']; endif;?>";
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.