基于JQuery实现的Select级联

首先来讲一下基于JQuery实现的Select级联。Select级联是指，一个Select选项的变化会影响另一个Select选项列表的变化。比如，当第一个Select选项列表为“省份”，第二个Select选项列表就应该为该省份下的所有“城市”。

以下是实现Select级联的步骤：

1. 引入JQuery库

首先，在网页头部引入JQuery库，以便使用JQuery的方法和属性。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 创建Select选项列表

接着，在HTML页面中创建两个Select选项列表：一个是"省份"，另一个是"城市"。可以通过option标签来添加选项，如下所示：

<select id="province">
  <option value="">请选择省份</option>
  <option value="广东省">广东省</option>
  <option value="江苏省">江苏省</option>
  <option value="浙江省">浙江省</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

需要注意的一点是，在"省份"选项列表中，第一个选项value值为空，这是为了使用户第一次打开页面时不会看到默认选中项。

3. 写下JQuery代码

接下来，需要编写一段JQuery代码，实现当"省份"选项列表变化时，"城市"选项列表会在下拉框中显示该省份下所有的城市。代码如下：

$(document).ready(function(){
  $("#province").change(function(){
    var province = $(this).val(); //获取选中值
    $.ajax({
        url:"getCity.php", //提交的url地址
        type:"post", //提交方式
        data:{"province":province},//传递参数
        dataType:"json",//数据类型
        success:function(data){
            $("#city").children().not(":first").remove();//移除所有城市的选项
            $.each(data, function(key, value){//遍历
                $("#city").append("<option value="+value+">"+value+"</option>");//方式一：添加城市选项
                //$("#city").append($("<option>").val(value).text(value));//方式二：添加城市选项
            });
        },
        error:function(){
            alert("出错了");
        }
    });
  });
});

在这段代码中，我们使用了JQuery的ajax方法，向服务器请求获取该省份下所有城市的数据。具体实现方式有2种：

第一种，通过字符串的形式添加城市选项：

$("#city").append("<option value="+value+">"+value+"</option>");

第二种，通过动态创建option标签，添加城市选项：

$("#city").append($("<option>").val(value).text(value));

需要注意的是，这里的"city"和"province"是与前面HTML中的id对应的。这样，当"province"选项列表变化时，就会触发该函数，然后执行ajax方法。

4. 创建服务器端程序

最后，需要在服务器端编写一个程序来获取该省份下所有城市的数据，并将其返回给ajax方法。在本例中，我们可以使用php语言来实现，代码如下：

<?php
  $province = $_POST['province'];
  switch($province){
    case "广东省":
      $data = array("广州市","深圳市","珠海市","汕头市");
      break;
    case "江苏省":
      $data = array("南京市","苏州市","徐州市","扬州市");
      break;
    case "浙江省":
      $data = array("杭州市","宁波市","温州市","台州市");
      break;
    default:
      $data = array();
      break;
  }
  echo json_encode($data);
?>

其中涉及到的知识点有：

$_POST表示从HTTP POST方法中传递参数，也可以使用$_GET来获得从HTTP GET方法中传递参数。
php中的switch语句用于多个条件的判断，这里以$province来判断省份。
json_encode函数将数组转化为json格式的字符串。

示例说明

以下将通过两个示例来说明Select级联的实现:

示例1：省市数据存储在本地JSON文件中

首先，准备一个包含省市数据的json格式文件，例如"city.json"，内容如下：

{
  "广东省": ["广州市","深圳市","珠海市","汕头市"],
  "江苏省": ["南京市","苏州市","徐州市","扬州市"],
  "浙江省": ["杭州市","宁波市","温州市","台州市"]
}

在前端代码中获取json格式数据并进行读取：

$(document).ready(function(){
  loadData();//加载数据

  $("#province").change(function(){
    var province = $(this).val(); //获取选中值
    $("#city").children().not(":first").remove();//移除所有城市的选项

    var tempCity = cityData[province];//获取该省份的城市列表
    for (var i=0; i< tempCity.length; i++) {
      $("#city").append("<option value="+tempCity[i]+">"+tempCity[i]+"</option>");
    }
  });
});

function loadData(){
  $.get("city.json", function(data){
     //将返回的json字符串转化为json格式的对象
     cityData = JSON.parse(data);
  });
}

在loadData函数中，通过ajax的get方法获取city.json中的数据，并将返回的json字符串通过JSON.parse()方法转化为json格式的对象。在"省份"列表项发生改变时，获取该省份下的城市列表并添加到"城市"选项列表中。

另外，因为这里没有与服务器进行交互，所以将前面的服务器端程序省略。完整示例代码可参考以下页面：https://codepen.io/sheming-geek/pen/PojwrqY

示例2：省市数据存储在后端数据库中

首先，假设现有一个数据库表"city"，其中包含"province"和"city"2个字段，以及一些省市数据。需要在服务器端编写php程序来获取数据，示例代码如下：

<?php
  $host_name = "localhost";
  $database = "test";
  $user_name = "root";
  $password = "your_password";
  $pdo = new PDO("mysql:host=$host_name;dbname=$database", $user_name, $password);
  $pdo->query("set names utf8");

  $province = $_POST["province"];
  $sql = "select * from city where province=:province";
  $stmt = $pdo->prepare($sql);
  $stmt->bindParam(":province", $province);

  if ($stmt->execute()) {
      $data = array();
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
          array_push($data, $row["city"]);
      }
      echo json_encode($data);
  }
?>

其中，需根据情况修改连接数据库的相关信息，比如$host_name、$database、$user_name和$password。此外，还包含了使用PDO连接数据库、执行传参的查询语句并将结果编码为json格式字符串的一些代码。

在前端代码中，则需要改为调用服务器端的php程序，并将返回的数据添加到"城市"选项列表中。代码如下所示：

$(document).ready(function(){
  $("#province").change(function(){
    var province = $(this).val();
    $.ajax({
        url:"getCity.php",
        type:"post",
        data:{"province":province},
        dataType:"json",
        success:function(data){
            $("#city").children().not(":first").remove();//移除所有城市的选项
            $.each(data, function(key, value){
                $("#city").append("<option value="+value+">"+value+"</option>");
            });
        },
        error:function(){
            alert("出错了");
        }
    });
  });
});

需要注意的是，此次的ajax调用的url为上面的php程序文件路径。

这里只是一个例子，实际中的数据库操作可能会更复杂。完整示例代码可参考以下页面：https://codepen.io/sheming-geek/pen/zYrxQro

希望通过这两个示例，能够更好的理解级联菜单的实现过程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JQuery实现的Select级联 - Python技术站