老师问几个问题。。
1:35-1:41是什么意思,看不懂,data-where是什么鬼
2.这是什么意思?是拼接吗?没看明白。 这里是$(....)提取里面这个元素。可是这里面写的我在html里面找不到这个咋提取?
3.这个是拼接的意思吗还是什么意思?拼接不是应该这样+'item'+吗? 怎么是'+item+'这样写呢?
4.这个是什么来的?从哪里跑过来的。。越看越懵逼啊。。
正在回答 回答被采纳积分+1
同学你好,问题解答如下:
可以先看一下下面代码的注释:
/ ui-cascading $.fn.UiCascading = function() { var ui = $(this); // 获取所有下拉列表元素 var selects = $('select', ui); //给所有下拉列表绑定改变事件 selects .on('change', function() { // 获取当前列表选中的值,例如'朝阳区' var val = $(this).val(); // 获取当前select的索引 var index = selects.index(this); // 触发下一个 select 的更新,根据当前的值 // 获取当前下拉列表的data-where属性值 var where = $(this).attr('data-where'); // 判断data-where属性是否有值,如果有就分隔,没有赋值为[] where = where ? where.split(',') : []; // 在属性值中添加当前下拉列表选择的值 where.push($(this).val()); // 更新当前的下一个列表data-where属性值 selects.eq(index + 1) .attr('data-where', where.join(',')) .triggerHandler('reloadOptions'); // 触发下一个之后的所有 select 的初始化(清除不应该的数据项) ui.find('select:gt(' + (index + 1) + ')').each(function() { $(this) .attr('data-where', '') .triggerHandler('reloadOptions'); }) }) // 绑定自定义reloadOptions事件 .on('reloadOptions', function() { // 获取select的data-search属性值 var method = $(this).attr('data-search'); // 获取select的data-where属性值并分隔为字符串 var args = $(this).attr('data-where').split(','); // 从通过字符串参数从data.js文件中获取数据 var data = AjaxRemoteGetData[method].apply(this, args); var select = $(this); // 将原有的option移除 select.find('option').remove(); // 将获取的指定数据遍历,和option标签拼接,重新添加到select中 $.each(data, function(i, item) { var el = $('<option value="' + item + '">' + item + '</option>'); select.append(el); }); }); // 默认第一个的select触发更新事件 selects.eq(0).triggerHandler('reloadOptions'); }
这段代码主要操作就是选择一个select之后,下一个select会更新data-where记录,下面所有的select会根据当前的选择更新内容。
1、data-where是自定义的属性名(可以更改),用来存储选择信息的。在这里添加的
2、是拼接option标签以及内容,最后追加到select元素中。使用$()还可以将DOM对象变为jQuery对象,然后追加到select中
3、关于拼接,理解有问题。item是变量,不需要添加引号变为字符串。例如:
变量a与左右字符串拼接。
4、$(this)是当前选择的select元素,$(this).val()是选择的值,例如第一个选择‘西城区’,那么获取出来的就是西城区。where数组中就会将这个值放进去,当选择第二个select的时候,例如‘三级甲等’,那么where数组中就是[西城区,三级甲等] 。下一个select中就会将这些数据添加到data-where中,所以需要使用join方法,将数组使用逗号连接为字符串
也就是这样使用
自己再测试理解下,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星