在web开发中,表格是非常常用的元素之一,而jquery是一种常用的前端 JavaScript 库。今天我们来学习如何用jquery来控制表格的联动。 在此之前,我们先来介绍一下jquery中的基础语法: $(selector).action();其中,$是jquery的符号,用来定义jquery;selector是选择器,用来选择HTML元素;action是jquery的方法,用来操作HTML元素。 现在,我们开始具体介绍如何实现表格的联动。假设我们有一个包含省份和城市的表格。当用户选择一个省份时,实现城市的联动。 首先,我们需要给省份下拉列表添加一个onchange事件,在选中省份时触发下面的函数: [JavaScript] 纯文本查看 复制代码 function get_cities(){
var province=$('#province option:selected').text();
//通过选择器获取选中的省份
var cities=['北京','上海','广州','深圳','杭州'];//模拟数据
var city_html='';
for(var i=0;i<cities.length;i++){
city_html+=''+cities[i]+'';
}
$('#city').html(city_html);
//将生成的城市列表插入到城市下拉列表中
} 在这段代码中,我们首先通过选择器获取选中的省份。接下来,我们要根据所选省份的不同展示不同的城市列表。在这里,我们设置一个模拟数据,存放了各省的城市列表。在for循环中我们遍历这个数据,并生成对应的option列表。最后,我们用jquery将这个option列表插入到city下拉列表之中。 当然,如果你想展示真实的城市列表,可以通过Ajax等方式获取。 最后别忘了在HTML代码中添加对应的省份和城市下拉列表:
|