时间戳

首页 > 解决方案 > 使用下拉列表 Jquery .ajax() 方法动态加载表

jquery - 使用下拉列表 Jquery .ajax() 方法动态加载表

问题描述

我通过此处发布的其他一些类似的问题了解了 jQuery。我的问题是我有一个可行的下拉列表，列出了世界 7 大洲。一旦选择了一个大陆，它应该显示该大陆下面的国家。这是我遇到麻烦的地方：

jsonTest.html

<html>
<head><title>JSON jQuery AJAX</title></head>
<body>

<div>Users </div>
<select id="sel_user">

</select>



<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="myscript.js" type="text/javascript"></script>
</body>
</html>

获取国家/地区.php

<?php
require_once('pdoDB.class.php');
$countryID = $_POST['countryID'];
//$countryID = "EU";
//echo $countryID;
$db = pdoDB::getConnection();
$country_arr = array();
 $sql = "SELECT Name,SurfaceArea 
            FROM w_country WHERE Continent='".$countryID."'";
$stmt = $db->query($sql); 
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $name = $row['Name'];
    $surfaceArea = $row['SurfaceArea'];

    $country_arr[] = array("name" => $name, "surfaceArea" => $surfaceArea);
    echo json_encode($country_arr);

  }

?>

myscript.js

$(document).ready( function() {
 $.getJSON( "ajax1.php", function(obj) { 
  $.each(obj, function(key, value) { 

        // append("<li>"+ value.Name +  
                  //   "</li></br>");
         $("#sel_user").
         append("<option value='"+value.Id+"'>"
                       +value.Name+"</option>");

  });
 });
  $("#sel_user").change(function(){
        var Id = $(this).val();
        alert(Id);
        $.ajax({
            url: 'getCountry.php',
            type: 'post',
            data: {countryID:Id},
            dataType: 'json',
            success:function(response){

                var len = response.length;
                $("#sel_user").empty();
                for( var i = 0; i<len; i++){
                    var id = response[i]['name'];
                    var area = response[i]['surfaceArea'];

                    $("#sel_user").append("<li>heheh</li>");



 }
            }
        });
    });

});

我可以在下拉列表中显示各大洲，但无法将国家 ID 传递到 php 页面以显示国家详细信息。

标签： jqueryajax

解决方案

推荐阅读