问题：

提交后如何保留选择的onchange下拉列表值

怀洛华

2023-03-14

我有三个下拉列表，分别是国家、州和城市。首先，国家/地区下拉列表将显示所有国家/地区。当选择一个国家/地区时，将从MySQL数据库中提取相应的国家/地区，并显示在“国家/地区”下拉列表中。与选择州一样，相应的城市将从MySQL数据库中提取，并显示在cities下拉列表中。

下面是我选择国家，州，城市并单击提交按钮之前的默认显示。

在我选择国家，州，城市，并点击提交按钮，如下所示。它将刷新并返回默认显示。

<!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>

<?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);
}
?>

共有1个答案

佴德曜

2023-03-14

首先要这样做：

<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");
    }
});

这个想法是你以用户可能的方式链式触发“变更”事件。

类似资料：

提交表单后保持选择值

问题内容：考虑：提交表单时，如何确保下拉列表中的选定值保持选中状态？此表单位于WordPress（PHP）内部。问题答案：为了避免许多if-else结构，让JavaScript自动完成：
提交后保留值

我正在尝试构建一个带有按钮的PHP计算器。我的问题之一是我不能有超过一个数字的值。例如，当我尝试输入一个值（例如33）时，文本框中的结果变为3，因为当我对所有数字使用submit时，页面被刷新。只能使用一个PHP页面。这个解决方案是向我建议的，但它不能解决我的问题，因为它使用了多个页面。此外，一个以上的数字似乎不起作用。另外，这里是我的HTML的一个示例这是我的用户界面的图片，一个我的用户界面
如何选择剑道UI下拉列表值？

如何在更改函数上选择剑道下拉列表值。剑道下拉列表在网格中。在更改函数中，我想选择列表中的第一项。我已经编写了代码：但是下拉列表没有选择更改功能。我该怎么做请帮帮我。
当选择了另一个“选择”下拉列表中的一个选项时，如何显示“选择”下拉列表

我想在选择另一个select元素的一个选项时显示一个select元素，在选择另一个选项时隐藏它。这是JavaScript：感谢任何帮助。谢谢
使用spring的标记在下拉列表中保留表单提交时的相同值

我在我的jsp中有一个下拉列表，使用Spring mvc，我面临的问题是，在表单提交时，下拉列表中的值会更改为默认值。我已经绑定了这个下拉列表，如下所示- BackingObject包含ObjectA的List，ObjectA包含另一个Object ObjectB，ObjectB包含基元类型属性id 我正在使用ajax向控制器发送post请求。
如何保留选择框值

我有一个选择框。有4个值（使用jstl标记生成），并且有加载按钮。我正在单击load按钮调用struts操作在struts操作类中，我添加了现在我想在jsp页面中保留以前选择的值我想与进行比较，而不是与Cloud进行比较。如何使用jstl（例如：提前致谢

提交后如何保留选择的onchange下拉列表值

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档