ホームページ > php教程 > php手册 > php+ajax 城市联动

php+ajax 城市联动

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-06-06 19:39:15
オリジナル
887 人が閲覧しました

php+ajax城市联动 ?php /* 表结构---- 表的结构 `web_city`--CREATE TABLE IF NOT EXISTS `web_city` ( `id` mediumint(8) NOT NULL AUTO_INCREMENT, `title` varchar(60) NOT NULL, `pid` mediumint(8) NOT NULL DEFAULT '0', PRIMARY KEY (`id`)) ENGINE=M

php+ajax 城市联动

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

<?php

 

 

/*  表结构

--

-- 表的结构 `web_city`

--

 

CREATE TABLE IF NOT EXISTS `web_city` (

  `id` mediumint(8) NOT NULL AUTO_INCREMENT,

  `title` varchar(60) NOT NULL,

  `pid` mediumint(8) NOT NULL DEFAULT '0',

  PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

 

--

-- 转存表中的数据 `web_city`

--

 

INSERT INTO `web_city` (`id`, `title`, `pid`) VALUES

(1, '北京', 0),

(2, '东单', 1),

(3, '西单', 1);

 

*/

 

$my_db = mysql_connect("localhost","root","");

mysql_select_db("city", $my_db);

mysql_query("set names 'utf8'");

$sql = "select * from web_city where pid = 0";

$query = mysql_query($sql);

$provice = array();

while($row = mysql_fetch_assoc($query))

{

  $provice[] = $row;

}

 

?>

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>php+ajax 城市联动</title>

<script src="jquery-1.8.0.min.js"></script>

</head>

<body>

<script>

function select_city(){

    var id = jQuery("#provice option:selected").val();

    $("#city").html('<option value="">选择市</option>'); 

    $.ajax({

           type: "post",

           url: "ajax.php",

           data: "id="+id,

           dataType: "json",

           success: function(msg){

                    var tbody = "";  

                    $.each(msg.optionss,function(n,value){

                     var trs = ""

                     trs += "<option value='"+ value.id +"'>"+value.title+"</option>"

                     tbody += trs;     

                    })

                   $("#city").append(tbody);

                   

                }

           });

     

    }

</script>

<div>

<select name="provice" id="provice" onchange="select_city()">

<option value="">选择省/市</option>

<?php foreach($provice as $val){?>

<option value="<?php echo $val['id'];?>"><?php echo $val['title'];?></option>

<?php }?>

</select>

<select name="city" id="city">

<option value="">选择市</option>

 

</select>

</div>

</body>

</html>

ログイン後にコピー

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?php

$my_db = mysql_connect("localhost","root","");

mysql_select_db("city", $my_db);

mysql_query("set names 'utf8'");

if(isset($_POST['id'])){

$id = $_POST['id'];

$sql_city = "select * from web_city where pid = $id";

$query_city = mysql_query($sql_city);

$city = array();

while($row = mysql_fetch_assoc($query_city))

{

  $city[] = $row;

}

echo json_encode(array('optionss'=>$city));

}

?>

ログイン後にコピー

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート