JQ实现省市联动及文档操作

最新推荐文章于 2021-09-14 11:42:18 发布

My_____Dream

最新推荐文章于 2021-09-14 11:42:18 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

分类专栏： JQ

本文链接：https://blog.youkuaiyun.com/My_____Dream/article/details/79231644

JQ 专栏收录该内容

13 篇文章

订阅专栏

本文档详细介绍了如何使用JQ实现省市联动的功能，包括步骤分析、代码实现和文档操作。通过创建数组、派发事件、遍历数组并使用append方法，实现了根据省份选择动态填充城市选项。同时，讲解了JQ中的文档操作，如内部插入、外部插入和删除等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQ实现省市联动及文档操作

一、步骤分析

1、创建好对应的数组

2、派发下来选的改变onchange事件触发函数

3、编写函数

4、函数内先获取省的下拉选通过传值的方式将数组联系起来

5、利用each遍历数组，使用append()方法给城市下拉选增加option标签并增加数组值

二、代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ省市联动</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var i=0;
var arr= new Array(3);
arr[0]= new Array("延安","西安","渭南");
arr[1]= new Array("1","2","3");
arr[2]= new Array("4","5","6");

$("[name='pro']").change(function(){
//获取省的下拉选的值
var $pro= $("[name='pro']").val();
//获取市的下拉选
var $citys= $("[name='ina']");
//初始化用一种创建标签增加内容的方式
$citys.html($("<option>").html("-请选择-"));
//遍历数组
$(arr[$pro]).each(function(){
//把二维数组增加到下拉选框内
$citys.append("<option>"+arr[$pro][i]+"</option>");
i++;
if(i>=3){i=0}
});

});
});
</script>
<body>
<select name="pro">
<option selected="selected" >请选择</option>
<option value="0">陕西省</option>
<option value="1">安徽省</option>
<option value="2">广东省</option>
</select>
<select name="ina">
<option selected="selected">请选择</option>
</select>
</body>
</html>

三、文档操作

内部插入
a.append(c):将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面

appendTo
prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面

a.insertAfter(c)
a.insertBefore(c)
删除
empty() 清空元素
remove() 删除元素

四、效果展示