집 >웹 프론트엔드 >JS 튜토리얼 >jquery를 사용하여 지방과 지방자치단체 간 연결을 달성하는 방법

jquery를 사용하여 지방과 지방자치단체 간 연결을 달성하는 방법

藏色散人원래의: 2021-12-01 10:55:053951검색

jquery를 사용하여 지방자치단체 간 연결을 구현하는 방법: 1. HTML 샘플 파일을 생성합니다. 2. "$(function() {for(var i = 0; i < prvo.length; i++))를 전달합니다. js 파일 {...}}" 방식을 사용하면 지방자치단체 간 연계가 가능합니다.

본 글의 운영 환경: windows7 시스템, jquery-2.1.4 버전, DELL G3 컴퓨터

jquery를 사용하여 지방자치단체 간 연결을 구현하는 방법

jQuery를 사용하여 도 및 시의 3단계 연결 메뉴 구현

jQuery를 사용하여 3단계 연결 구현 지방, 시 메뉴에 부족한 점이 있으면 더 많은 안내 부탁드립니다

HTML 페이지

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>省市区联动菜单</title>
	</head>
	
	<body>
		<!--选择省-->
		<select id="prvoince">
			<option>--请选择省份--</option>
		</select>
		<!--选择市-->
		<select id="city">
			<option>--请选择城市--</option>
		</select>
		
		<select id="district">
			<option>--请选择区--</option>
		</select>
		
		<script src="jquery.js" type="text/javascript">
			
		</script>
		<script type="text/javascript" src="js/jq.js">
		</script>

	</body>

</html>

js 페이지

var prvo = [
	"山西", "四川"];var cit = [
	["太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],
	["成都市", "绵阳市", "雅安市", "乐山市", "眉山市"]];var dis = [
	[
		["小店区", "迎泽区"],
		["吕梁1", "吕梁2"],
		["临汾1", "临汾2"],
		["运城1", "运城2"],
		["阳泉1", "阳泉2"]
	],
	[
		["成都1", "成都2"],
		["绵阳1", "绵阳2"],
		["雅安1", "雅安2"],
		["乐山1", "乐山2"],
		["眉山1", "眉山2"]
	]]$(function() {

	//初始化省份
	for(var i = 0; i < prvo.length; i++) {
		//每次循环加一个option标签
		$("#prvoince").append("<option>" + prvo[i] + "</option>")
	}
	//---on---在选择元素上绑定一个或多个事件的事件处理函数
	//加入change事件使在省发生改变时 发生改变
	$("#prvoince").on(&#39;change&#39;, function() {
		//清除元素,将上一次选择的内容清除掉,开始新一轮的选择
		//$(&#39;#city&#39;).empty()
		$(&#39;#city&#39;).text(&#39; &#39;);
		$(&#39;#district&#39;).text(&#39; &#39;);
		//利用选择器中的  :selected  方法匹配到所有的元素,然后再用index方法获得下标
		//得到被选中省份的下标
		var proIndex = $("#prvoince option:selected").index();
		var citys = cit[proIndex - 1]
		for(var i = 0; i < citys.length; i++) {
			$("#city").append("<option>" + citys[i] + "</option>")
			//[this.value]
		}
	})
	
	$("#city").on(&#39;change&#39;,function(){
		$("#district").empty()
		var proIndex = $("#prvoince option:selected").index();
		var citIndex = $("#city option:selected").index()
		var distr = dis[proIndex - 1][citIndex]
		for (var i = 0; i < distr.length; i++) {
			$("#district").append("<option>" + distr[i]+ "</option>")
		}
	})})

추천 학습: "jquery 동영상 튜토리얼"

위 내용은 jquery를 사용하여 지방과 지방자치단체 간 연결을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jquery를 사용하여 요소를 선택하고 속성을 수정하는 방법다음 기사：jquery를 사용하여 요소를 선택하고 속성을 수정하는 방법