级联菜单应用中出现的问题

转载 2012年03月27日 13:45:42
<head>
    <title>专区 </title>   
    
    <script language="javascript" type="text/javascript">
    //课程选择变换
        function aClass(aData, aValue, aText) {
    if (aClass.arguments.length < 3)
      alert("传入的参数错误!")
    else {
      this.Data  = aData;
      this.Value = aValue;
      this.Text  = aText;
    }
  } 
function chgDnCombobox(aSrc, aDes, aClass, aRemain){
    if (chgDnCombobox.arguments.length < 3)
alert("传入的参数错误!")
    else if (aSrc.type != "select-one")
      alert("传入的参数错误!")
    else if (aClass == null)
      alert("aClass未定义错误!")
    else {
      if (aRemain==null)
        aRemain = 1;
      chgDnComboboxItem(aSrc.options[aSrc.selectedIndex].value, aDes, aClass, aRemain);
    }
  }
function chgDnComboboxItem(aValue, aDes, aClass, aRemain){
    if (chgDnComboboxItem.arguments.length<3)
      alert("参数传入错误!")
    else if (aClass==null)
      alert("错误!aClass没有定义!")
    else{
      if (aRemain==null)
        aRemain = 1;
      deleteAllComboboxItem(aDes, aRemain);
      for (var i=0; i<aClass.length; i++)
        if (aClass[i].Data==aValue)  /* check aClass[i].Data */
          if (aClass[i].Data!="")
            addComboboxItem(aDes, aClass[i].Text, aClass[i].Value);
    }
  } 
function deleteAllComboboxItem(aList, aRemain) {
    for (var i=aList.options.length; i > aRemain-1; i--)
      aList.options[i] = null;
  }
function addComboboxItem(aList, aText, aValue) {
    var aOption = new Option(aText, aValue);
    eval("aList.options[aList.options.length]=aOption");
}
    </script>    
    
</head>

<tr>
                <td class="tableLink">上课地点:</td>
                <td>
                    <div>
                    <select name="city" size=1  style="width:80px;" onchange='change_area(document.myform)'>
                      <option value="北京">北京</option>
                      <option value="成都">成都</option>
                    </select>
                    </div>
                </td>
             </tr>
             <tr>
                <td class="tableLink">课程选择:</td>
                <td>                    
                    <div>
                    <select name="lesson" size=1>
                      <option value="北京">5月5日    第一期   已报满</option>
                      <option value="北京">5月6日    第二期   已报满</option>                      
                      <option value="北京">5月26日 第七期</option> 
                      <option value="北京">5月27日 第八期</option> 
                    </select>           
                    </div> 
                </td>
             </tr>

<script language="javascript" type="text/javascript">
            function onchg(aForm)
                {onchg(document.myform);}
        var f_Set0 = new Array(
                    new aClass('北京', '5月5日  第一期 已报满', '5月5日  第一期 已报满'),
                    new aClass('北京', '5月26日 第七期', '5月26日 第七期'),
                                       
                    new aClass('成都', '5月5日  第一期', '5月5日  第一期'),
                    new aClass('成都', '5月6日  第二期', '5月6日  第二期'),
                    new aClass("End", "End", "End")
                    );
        function change_area(aForm) {
            chgDnCombobox(aForm.city, aForm.lesson, f_Set0 , 0)
        } 
        </script> 

<form name="myform" method="post" action="">
</form>

这个是我在网上找到的一个非常适合我的应用,就是二级级联,挺方便的。
1. 级联菜单一定放到同一个form中,并且,不允许包含runat="server"

2. 由于tr中不允许select标签,因此,可以通过嵌入<div>标签来解决,

3. select中的字体颜色是否可以用css来改变,希望有人能指点。

 

下面是另外的一个方法,也挺好的,可是在我的程序中,没有成功,问题在哪里,也不清楚,单独用是没有问题的,以后在研究。

<head>
    <title>无标题页</title>
    <script language="JavaScript" type="text/javascript">
    var sel2=[
["5月5日  第一期  已报满","5月6日  第二期  已报满","5月12日 第三期  已报满","5月13日 第四期  已报满","5月19日 第五期  已报满","5月20日 第六期  已报满","5月26日 第七期","5月27日 第八期"],
["5月5日  第一期","5月6日  第二期","5月12日 第三期","5月13日 第四期","5月19日 第五期","5月20日 第六期","5月26日 第七期","5月27日 第八期"]
];
function getSel2(){
var slt1=document.form.select1;//数组获得一级下拉框对象
var slt2=document.form.select2;//数组获得二级下拉框对象
var slt12=sel2[slt1.selectedIndex-1];//得到对应select1的select2的内容
slt2.length=1;//清空select下拉框
//**将城市数组中的值填充到城市下拉框中**/
         for(var i=0;
         i<slt12.length;i++){slt2[i+1]=new Option(slt12[i]);
         }
}

    </script>
</head>
<body>
    <form name="form" id="form1">
        <p>  </p>
            <p>  
              <select name="select1" id="select1" onChange="getSel2()">
              <OPTION VALUE="0">请选择 </OPTION>
                  <OPTION VALUE="">北  京 </OPTION>
                  <OPTION VALUE="">成  都</OPTION>
                      
              </select>
               
              <select name="select2" id="select2" onchange="">
                <OPTION VALUE="0">请选择</OPTION>
                
             </select>
               
            </p>
    </form>
</body>


 

用dom解析xml的方法实现二级菜单级联及它们中出现的浏览器兼容问题

今天做关于用解析xml的方法实现二级菜单级联的时候,出现了浏览器不统一的问题,在IE浏览器中ok,在火狐浏览器中不行,后来发现,火狐浏览器在解析xml的时候出现了空格和换行,所以做了更改,代码如下:-...

Excel VBA高效办公应用-第十六章-VBA高效文件操作(使用级联菜单管理多个工作簿)

本示例提供了一种管理多个文件的方法——将不同文件中不同表的名字放到菜单上,单击菜单就能调出不同文件中相应的表。 Option Explicit Sub OpenMenu() '自定义多级...

34.6.1 Excel数据有效性的高级应用【动态二级级联菜单/如百度输入框Ajax效果的下拉菜单/圈出无效数据】

声明:本博客分类《Excel2010》中的 标题带章节号如 34.6 的文章均为 本人阅读 Excel Home书籍作品《Excel2010应用大全》的读书笔记   这本书非常好,对Excel2...

.net jquery无刷新级联菜单

  • 2015年09月16日 16:34
  • 488KB
  • 下载

jquery-FillOptions级联菜单

  • 2016年11月17日 15:30
  • 29KB
  • 下载

jQuery实现级联菜单<数据动态加载>

级联菜单数据动态加载

无刷新级联菜单

  • 2012年02月08日 13:55
  • 29KB
  • 下载

Ajax的常用技巧(2)---实现Web页面中的级联菜单

在网络上显示数据,往往只显示数据中的一部分信息,如文章标题,产品名称等。如果浏览器要查看所有信息,只需点击相关链接即可。在web技术中,可以采用级联菜单完成上述操作。根据用户的选择,动态展开,并显示出...
  • pzhtpf
  • pzhtpf
  • 2012年08月12日 11:42
  • 3593
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:级联菜单应用中出现的问题
举报原因:
原因补充:

(最多只允许输入30个字)