《JS两级联动菜单学习全接触》

最近在做一个小系统,前期想想应该是蛮简单的,结果花了两天的时间还是没有什么头绪,本来是想结合Ajax去做这块,后来由于对Ajax这块接触的不是太多,只能放弃了,以下是两级联动菜单的代码,大家瞧瞧:

<script type="text/javascript">
var ClassArray 
= new Array();
ClassArray[
0]= new Array('瓯海','16','24');
ClassArray[
1]= new Array('龙湾','17','24');
ClassArray[
2]= new Array(''婺城区','14','23');
ClassArray[
3]= new Array('金东区','15','23');

function ChangeClass(College)
{
    $(
'Class').options.length=0;
    var i;
    
for (i=0;i < ClassArray.length; i++)
    
{
        
if (ClassArray[i][2]==College)
        
{
            $(
'Class').options[$('Class').length] = new Option(ClassArray[i][0],ClassArray[i][1]);
        }

    }

}

</script>
<select name="College" class="select-150px" onchange="ChangeClass(this.options[selectedIndex].value)">
<option value="24">浙江省温州市</option>
<option value="23" selected="selected">浙江省金华市</option>
</select>
<select name="Class" class="select-150px">
<option value="14" selected="selected">龙湾</option>
<option value="15">00瓯海</option>
</select>

其实代码很简单,主要是人比较懒,以前虽然所用到过,但是从来没有去整理过类似的代码是怎么回事情,更不要所自己去弄段JS代码出来,这次没有办法,花了大概三个小时的时间才算完整的整理出这个联动的代码,记录下先。

以下是以后需要继续学习的地方:

1、数组,var ClassArray = new Array(); 看来明显是对数组没有概念,不然这点小东西怎么可能需要花这么长的时间去做,以后需要加强的学习学习了,包括C#,js,因为代码都是相通的;

2、Ajax方面,看来这个也算是一个趋势吧,有时间还是要好好的学习下,不然就要落伍了,现在都是直接用别人的Dll类库去实现Ajax的效果,这次我想所有的东西都是用HTML控件去做的,那些服务端的Ajax控件就一点没有用武的地方了;

原文地址:https://www.cnblogs.com/Apollo/p/774241.html