个人中心
gpt4 book ai didi

php sql 依赖下拉菜单

转载 作者：行者123 更新时间：2023-11-29 06:34:59 25 4
gpt4 key购买 nike

我正在尝试创建一组动态的、依赖的下拉列表。我希望在第三个列表中进行选择时填充两个列表。即，当选择 Select1 时，Select2 和 Select3 同时自动填充。我一直在处理 PHP 和 jquery 脚本，但我没有成功地修改代码来完成我想要的事情。任何帮助将不胜感激。

ajaxData.php

<?php
//Include the database configuration file
include 'dbConfig.php';

if(!empty($_POST["country_id"])){
    //Fetch all state data
    $query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //State option 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>';
    }
}elseif(!empty($_POST["country_id"])){
    //Fetch all city data
    $query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['country_id']." AND status = 1 ORDER BY city_name ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //City option 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>';
    }
}
?>

index.php

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Dynamic Dependent Select Boxes by CodexWorld</title>
<meta charset="utf-8">
<style type="text/css">
.container{width: 280px;text-align: center;}
select option{
    font-family: Georgia;
    font-size: 14px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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>
<div class="container">
    <?php
    //Include the database configuration file
    include 'dbConfig.php';

    //Fetch all the 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 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 id="state">
        <option value="">Select country first</option>
    </select>

    <select id="city">
        <option value="">Select state first</option>
    </select>
</div>
</body>
</html>

创建表countries ( country_id int(11) 不为空， country_name varchar(50) 字符集 utf8 NOT NULL, status tinyint(1) NOT NULL DEFAULT '1' COMMENT '0: 已阻止，1: 事件') ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `states` (

state_id int(11) 不为空， state_name varchar(50) 整理 utf8_unicode_ci NOT NULL, country_id int(11) 不为空， status tinyint(1) NOT NULL DEFAULT '1' COMMENT '0: 已阻止，1: 事件') ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

修改表states 添加主键(state_id)；

修改表states 修改state_id int(11) 非空自动增量；提交；

CREATE TABLE cities (

city_id int(11) NOT NULL, city_name varchar(50) 整理 utf8_unicode_ci NOT NULL, state_id int(11) NOT NULL, status tinyint(1) NOT NULL DEFAULT '1' COMMENT '0: 已阻止，1: 事件') ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

更改表城市 添加主键(city_id)；

更改表城市 修改 city_id int(11) NOT NULL AUTO_INCRMENT;

最佳答案

我无法复制或测试您的 AJAX 调用，并且您没有提供数据结构的示例。我建议您使用 AJAX 来填充所有内容，而不是混合在 PHP 中。考虑以下代码。

var countries = [{
    value: "us",
    label: "United States",
    states: [{
      value: "ca",
      label: "California",
      cities: [{
        value: "sf",
        label: "San Francisco"
      }, {
        value: "la",
        label: "Los Angeles"
      }]
    }, {
      value: "or",
      label: "Oregon"
    }, {
      value: "wa",
      label: "Washington"
    }]
  }, {
    value: "mx",
    label: "Mexico"
  },
  {
    value: "ca",
    label: "Canada"
  }
];
$(function() {
  function populateSelect(arr, tObj) {
    $("<option>").appendTo(tObj);
    $.each(arr, function(k, v) {
      $("<option>", {
        value: v.value
      }).data("id", k).html(v.label).appendTo(tObj);
    });
  }

  populateSelect(countries, $("#country"));
  $("#state").width($("#country").width() + "px");
  $("#city").width($("#country").width() + "px");

  $('#country').on('change', function(e) {
    var c = $("option:selected", this).data("id");
    populateSelect(countries[c].states, $("#state"));
    $("#state").prop("disabled", false);
    /*
    $.ajax({
      type: 'POST',
      url: 'ajaxData.php',
      data: JSON.stringinfy({'country_id': c}),
      success: function(resp) {
        populateSelect(resp, $('#state'));
      }
    });
    */
  });

  $('#state').on('change', function(e) {
    var c = $("#country option:selected").data("id");
    var s = $("option:selected", this).data("id");
    populateSelect(countries[c].states[s].cities, $("#city"));
    $("#city").prop("disabled", false);
    /*
    $.ajax({
      type: 'POST',
      url: 'ajaxData.php',
      data: JSON.stringinfy({'state_id': s}),
      success: function(resp) {
        populateSelect(resp, $('#cities'));
      }
    });
    */
  });
});
.container {
  width: 280px;
  text-align: center;
}

.container ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.container ul li label {
  width: 120px;
  display: inline-block;
}

select option {
  font-family: Georgia;
  font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <ul>
    <li>
      <label>Country</label>
      <select id="country">
      </select>
    </li>
    <li>
      <label>State</label>
      <select id="state" disabled="true">
      </select>
    </li>
    <li>
      <label>City</label>
      <select id="city" disabled="true">
      </select>
    </li>
  </ul>
</div>

在评论中，您可以看到您将使用 AJAX 做什么。结构是相同的:

[
  {
    value,
    label
  }
];

我建议这样做，因为您可以轻松地使用它 jQuery UI Autocomplete如果你选择的话。

希望这有帮助。

关于php sql 依赖下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54381416/

25 4 0
文章推荐： mysql - 属性为 null 导致 NullReferenceException 但 Entity Framework 数据库中的主键和外键是正确的并且彼此完全匹配
文章推荐： java - 看不懂 3D 数组
文章推荐： java - 如何使用另一个线程从方法中获取结果
文章推荐： php - 如何检查json数据数组是否有返回值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com