使用下拉列表从 mysql 数据库修复数据搜索代码

Question

我正在尝试编辑本教程中的代码：[https://www.youtube.com/watch?v=fSIg5y5QXbc&ab_channel=Webslesson][1]。问题是当两个或多个国家具有相同的州名时（仅凭想象）。例如，美国和俄罗斯有相同的“xyz”状态，当我 select 美国和状态：“xyz”时，程序看不出有什么区别（好像它只是忘记了我们在哪个国家）并显示所有两国“xyz”州的城市。你能帮我解决这个问题吗？

编辑：我想我很接近，但我需要知道如何保存例如：fetch.php 文件中的 $select_country=(selected country)

index.php

<?php
//index.php

include('database_connection.php');

$country = '';

$query = "
 SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC
";
$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
{
 $country .= '<option value="'.$row["country"].'">'.$row["country"].'</option>';
}

?>
<!DOCTYPE html>
<html>
 <head>
  <title>Insert Dynamic Multi Select Box Data using Jquery Ajax PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery.lwMultiSelect.js"></script>
  <link rel="stylesheet" href="jquery.lwMultiSelect.css" />
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Insert Dynamic Multi Select Box Data using Jquery Ajax PHP</h2><br /><br />
   <form method="post" id="insert_data">
    <select name="country" id="country" class="form-control action">
     <option value="">Select Country</option>
     <?php echo $country; ?>
    </select>
    <br />
    <select name="state" id="state" class="form-control action">
     <option value="">Select State</option>
    </select>
    <br />
    <select name="city" id="city" multiple class="form-control">
    </select>
    <br />
    <input type="hidden" name="hidden_city" id="hidden_city" />
    <input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" />
   </form>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 $('#city').lwMultiSelect();

 $('.action').change(function(){
  if($(this).val() != '')
  {
   var action = $(this).attr("id");
   var query = $(this).val();
   var result = '';
   if(action == 'country')
   {
    result = 'state';
   }
   else
   {
    result = 'city';
   }
   $.ajax({
    url:'fetch.php',
    method:"POST",
    data:{action:action, query:query},
    success:function(data)
    {
     $('#'+result).html(data);
     if(result == 'city')
     {
      $('#city').data('plugin_lwMultiSelect').updateList();
     }
    }
   })
  }
 });

 $('#insert_data').on('submit', function(event){
  event.preventDefault();
  if($('#country').val() == '')
  {
   alert("Please Select Country");
   return false;
  }
  else if($('#state').val() == '')
  {
   alert("Please Select State");
   return false;
  }
  else if($('#city').val() == '')
  {
   alert("Please Select City");
   return false;
  }
  else
  {
   $('#hidden_city').val($('#city').val());
   $('#action').attr('disabled', 'disabled');
   var form_data = $(this).serialize();
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     $('#action').attr("disabled", "disabled");
     if(data == 'done')
     {
      $('#city').html('');
      $('#city').data('plugin_lwMultiSelect').updateList();
      $('#city').data('plugin_lwMultiSelect').removeAll();
      $('#insert_data')[0].reset();
      alert('Data Inserted');
     }
    }
   });
  }
 });

});
</script>

fetch.php

<?php
//fetch.php

if(isset($_POST['action']))
{
 include('database_connection.php');

 $output = '';

 if($_POST["action"] == 'country')
 {
  $query = "
  SELECT state FROM country_state_city 
  WHERE country = :country 
  GROUP BY state
  ";
  $statement = $connect->prepare($query);
  $statement->execute(
   array(
    ':country'  => $_POST["query"]
   )
  );
  $result = $statement->fetchAll();
  $output .= '<option value="">Select State</option>';
  foreach($result as $row)
  {
   $output .= '<option value="'.$row["state"].'">'.$row["state"].'</option>';
  }
 }
 if($_POST["action"] == 'state')
 {
  $query = "
  SELECT city FROM country_state_city 
  WHERE state = :state
  ";
  $statement = $connect->prepare($query);
  $statement->execute(
   array(
    ':state'  => $_POST["query"]
   )
  );
  $result = $statement->fetchAll();
  foreach($result as $row)
  {
   $output .= '<option value="'.$row["city"].'">'.$row["city"].'</option>';
  }


 }
 echo $output;
}

?>

我不加“insert.php”因为我根本不用它

Answer 1

对于这种情况，国家、州和城市都应该存储在单独的 table 中。然后你 link 他们借助外键。

但是由于在您的案例中所有记录都在一个 table 中，您可以将所选国家/地区添加到查询中以确保只有属于特定国家/地区 and/or 州的记录受到影响。

正如您在下面看到的，var country = $('#country').val(); 获取了所选国家并添加到 ajax 请求中。然后，包含在服务器上的 select 查询中。

index.php

<?php
//index.php

include('database_connection.php');

$country = '';

$statement = $connect->prepare("
    SELECT country 
    FROM country_state_city 
    GROUP BY country 
    ORDER BY country ASC
");

$statement->execute();

while($row=$statement->fetch()){
    $country .= '<option value="'.$row["country"].'">'.$row["country"].'</option>';
}

?>
<!DOCTYPE html>
<html>
<head>
    <title>Insert Dynamic Multi Select Box Data using Jquery Ajax PHP</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="jquery.lwMultiSelect.js"></script>
    <link rel="stylesheet" href="jquery.lwMultiSelect.css" />
</head>
<body>
    <br /><br />
    <div class="container" style="width:600px;">
        <h2 align="center">Insert Dynamic Multi Select Box Data using Jquery Ajax PHP</h2><br /><br />
        <form method="post" id="insert_data">
            <select name="country" id="country" class="form-control action">
                <option value="">Select Country</option>
                <?php echo $country; ?>
            </select>
            <br />
            <select name="state" id="state" class="form-control action">
                <option value="">Select State</option>
            </select>
            <br />
            <select name="city" id="city" multiple class="form-control">
            </select>
            <br />
            <input type="hidden" name="hidden_city" id="hidden_city" />
            <input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" />
        </form>
    </div>

    <script>
        $(document).ready(function(){
            $('#city').lwMultiSelect();

            $('.action').change(function(){
                if( $(this).val() != '' ){
                    var action  = $(this).attr("id");
                    var query   = $(this).val();
                    var result  = action == 'country' ? 'state' : 'city';
                    var country = $('#country').val();

                    $.ajax({
                        url:'fetch.php',
                        method:"POST",
                        data:{action:action, query:query, country: country},
                        success:function(data){
                            $('#'+result).html(data);
                            if(result == 'city'){
                                $('#city').data('plugin_lwMultiSelect').updateList();
                            }
                        }
                    })
                }
            });
        });
    </script>
</body>
</html>

fetch.php

<?php
//fetch.php

if(isset($_POST['action'])){
    include('database_connection.php');

    $output = '';

    if($_POST["action"] == 'country'){
        $statement = $connect->prepare("
            SELECT state FROM country_state_city 
            WHERE country = :country 
            GROUP BY state
        ");
        $statement->execute([
            ':country' => $_POST["query"]
        ]);

        $output .= '<option value="">Select State</option>';
        while($row=$statement->fetch()){
            $output .= '<option value="'.$row["state"].'">'.$row["state"].'</option>';
        }
    }else if($_POST["action"] == 'state'){
        $statement = $connect->prepare("
            SELECT city FROM country_state_city 
            WHERE state = :state 
            AND country=:country
        ");
        $statement->execute([
            ':state'   => $_POST["query"],
            ':country' => $_POST["country"]
        ]);

        while($row=$statement->fetch()){
            $output .= '<option value="'.$row["city"].'">'.$row["city"].'</option>';
        }
    }

    echo $output;
}

?>

使用下拉列表从 mysql 数据库修复数据搜索代码

repairing data search code from mysql database using dropdown list

php

mysql

sql

ajax

jquery