2021-05-25

最新推荐文章于 2021-05-30 17:37:37 发布

喜爱Java语言

最新推荐文章于 2021-05-30 17:37:37 发布

阅读量58

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_55071724/article/details/117246902

版权

来讲小案例怎么实现效果呢，其实简单就是说必须掌握前面的东西，它能实现效果，盲目的实现项目，它不可能实现的，

1.来讲一下两联动，怎样如何是两联动的

1.两级联动小案例

（1）.首先搞好布局，设置内部样式

<meta charset="utf-8">
<title>两联动</title>
</head>

<body>
	<select id="ts">
        <option value="">省份：</option>
    </select>
    <select id="cid">
        <option value="">市：</option>
    </select>
	<div></div>

（2）.引入jquery插件

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

(3).设置遍历数组，一一对应数据，创建分别设置数组的

 <script>
        var ts = ["广东省", "湖南省", "广西省", "江西省", "四川省"];
        var cid =[
            ["茂名", "湛江", "东莞", "深圳","梅州"],
            ["张家界", "长沙", "衡阳"],
            ["南宁", "柳州", "北海"],
            ["南昌", "丰城", "宜春"],
            ["成都","自贡","凉州","达州"],
        ]
<script>

为了设置数组，更加一个一个的值获取到的，创建好对象的，把数组返回给option,转入option中，才获取数组的值

(4).给个窗口绑定事件，再用for循环的遍历数组,for循环它的作用是可以数组的判断性，用判断数组的决定性，for循环一直循环的执行，一直循环着不会停止的

 $(function () {
            for (var i = 0; i < ts.length; i++) {  
            }
});

(5). 获取的id值,用append的方法添加的内容，输出的内容转入索引值

append意思就是添加的内容，向每个匹配的元素内部追加内容。

返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

 $("#ts").append($("<option></option>").val(i + 1).html(ts[i]));

(6).来改变cid的事件,变量赋值返回的值，返回值减一，意思说反复减一；

 for (var i = 0; i < cid[index].length; i++) {
                }

(7).获取id的值，prop是什么意思了？

prop意思说获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

  $("#cid").prop("length", 1);

(8).再用for循环的遍历数组,for循环它的作用是可以数组的判断性，用判断数组的决定性，for循环一直循环的执行，一直循环着不会停止的,转入索引值

 for (var i = 0; i < cid[index].length; i++) {
                    
                }

（9）. 获取的id值,用append的方法添加的内容，输出的内容转入索引值

. 获取的id值,用append的方法添加的内容，输出的内容转入索引值

append意思就是添加的内容，向每个匹配的元素内部追加内容。

返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

 $("#cid").append($("<option></option>").val(i + 1).html(cid[index][i]));

喜爱Java语言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-05-25

来讲小案例怎么实现效果呢，其实简单就是说必须掌握前面的东西，它能实现效果，盲目的实现项目，它不可能实现的，1.来讲一下两联动，怎样如何是两联动的1.两级联动小案例（1）.首先搞好布局，设置内部样式<meta charset="utf-8"><title>两联动</title></head><body> <select id="ts"> <option value="">省份：&lt
复制链接

扫一扫