联动的知识点
联动的知识点
1.数组
2.变量
3.for循环
4.onchange
5.SelectedIndex
解析
1.数组 因为联动是需要将数组的内容输出所以要注意数组。
2.变量 注意获取的到每一个变量，将其输出到应在的地方。在函数你如果要var声明变量的话这个就是局部变量，不用var它就是全局变量
3.for循环 for循环的是内容，但是输出要在循环内输出。（注意下标，不要搞混了）
4.onchange 这个事件是单选框或者多选框发生了变化。
5.selectedIndex 可设置或返回下拉列表中被选中选项的下标。
下面是二级联动的代码
这个二级联动是利用了select框的下拉选项
<body>
<script>
console.log(window.location.search.slice('1'))
var x = ["请选择...", "美食", "景点", "电影"];
var y = [
["请选择..."],
["黄焖鸡", "油焖大虾", "红烧肉", "东坡肉"],
["黄山", "泰山", "嵩山", "华山"],
["烈日灼心", "逆战", "无间道", "黑金"]
];
window.onload = function() {
var chose1 = document.getElementById("chose1");
var chose2 = document.getElementById("chose2");
chose1.length = x.length;
for (var i = 0; i < x.length; i++) {
chose1.options[i].text = x[i];
}
chose2.length = y[0].length;
chose2.options[0].text = y[0][0];
}
function change(obj) {
chose2.length = y[obj].length;
for (var j = 0; j < y[obj].length; j++) {
chose2.options[j].text = y[obj][j];
}
}
</script>
<h2>二级联动</h2>
<!-- 一级 -->
<select id="chose1" onchange="change(selectedIndex)">
</select>
<!-- 二级 -->
<select id="chose2"></select>
</body>
二级联动的要注意的重点：
select框的内容和添加下拉框选项的改变是要利用innerText改变内容可以对其进行简化text就可以进行改变内容,下拉框的变化还要利用select框的下拉框的options因为是多个option所以后面需要加入s以表达多个的下拉框。
并命名其中最需要注意是for循环内数组对应的下标和外面需要输出的第二个select框的内容需要进行一次重置。
对于函数内则需要将对第二个select框进行内容的变化,因为是第二个的select框需要变化内容，所以需要给第一个select框添加事件所以利用事件change给添加事件。
三级联动和二级联动的差距
首先三级联动和二级联动基本一样，函数第一个函数内可以完成三级联动因为多了一个数组所以第一个函数内进行添加重置第三个的select的的内容。但是还是要注意二级联动只需要将第二个的内容进行重置在,所以还要利用下面的：
命名.options.length = 1;//将内容长度重置为1
三级联动的函数比二级联动除了多了一个函数内部基本一样，但是还需要将函数的参数进行转化为全局变量用来给下面的函数里面的for换输出的时候来使用当成下标，对于三级数组它需要有3个下标将内容进行输出需要获取到第一个函数的参数为第一个下标，第二个下标则是第二个函数的参数，第三个下标是for循环的值怎么获取到第一个参数。
以次类推四维的第一个是第一个下标是函数的参数，第二个下标是第二个函数的参数，第三个下标是第三个的函数的参数。怎么将参数转化为能被下面的函数拿到，将函数的参数变成一个全局变量即可拿到当成下标。
function change1(omj) {
chose3.length = m[omj].length;
var mmm = m[nmm][omj];
for (var l = 0; l < mmm.length; l++) {
chose3.options[l].text = mmm[l];
}
}
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
