ホームページ > ウェブフロントエンド > jsチュートリアル > 都道府県と市区町村間の JSON+Jquery 3 レベル連携_jquery

都道府県と市区町村間の JSON+Jquery 3 レベル連携_jquery

WBOY
リリース: 2016-05-16 15:20:07
オリジナル
1594 人が閲覧しました

レンダリングは次のとおりです:

早速、コードを掲載します。具体的なコードは次のとおりです。

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

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--读取数据库,以json的格式输出,然后复制json数据,创建js文件-->

<script src="json/CityJson.js" type="text/javascript"></script>

<script src="json/ProJson.js" type="text/javascript"></script>

<script src="json/DistrictJson.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$.each(province, function (k, p) {

var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";

$("#selProvince").append(option);

});

$("#selProvince").change(function () {

var selValue = $(this).val();

$("#selCity option:gt(0)").remove();

$.each(city, function (k, p) {

if (p.ProID == selValue) {

var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";

$("#selCity").append(option);

}

});

});

$("#selCity").change(function () {

var selValue = $(this).val();

$("#selDistrict option:gt(0)").remove();

$.each(District, function (k, p) {

if (p.CityID == selValue) {

var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";

$("#selDistrict").append(option);

}

});

});

});

</script>

</head>

<body>

<select id="selProvince">

<option value="0">--请选择省份--</option>

</select>

<select id="selCity">

<option value="0">--请选择城市--</option>

<option>aaaa</option>

<option>aaaa</option>

</select>

<select id="selDistrict">

<option value="0">--请选择区/县--</option>

</select>

<input type="button" id="btnOK" value="确定" />

</body>

</html>

ログイン後にコピー

このコードは比較的シンプルで非常に実用的です。この記事が皆さんのお役に立てれば幸いです。

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