两个栗子来自，《javascript开发技术大全》，觉得很有用放在这里。
第一个是动态选择
<html> <head> <title>15-21动态的选择</title> <meta http-equiv=content-type content=text/html;charset=gb2312> <script type=text/javascript src="15-21.js"></script> </head> <body> <form name="myForm" method="post"> <table border="0"> <tr> <td> 可选课程:<br> <select name="selectForm" size="5" ondblclick="addOption()"> <option value="yuwen">语文</option> <option value="shuxue">数学</option> <option value="yingyu">英语</option> <option value="wuli">物理</option> <option value="huaxue">化学</option> <option value="zhengzhi">政治</option> <option value="shegnwu">生物</option> <option value="yinyue">音乐</option> </select> </td> <td> --><br> <--<br> </td> <td> 已选课程(最多可选三门)：<br> <select name="selectTo" size="5" ondblclick="delOption()" </td> </tr> </form> </body> </html>
//添加选项
function addOption(){
//获得当前被选择的选项的索引
var index=myForm.selectForm.selectedIndex;
//在下拉列表框中没有选项时，index为-1
if(index>-1){
//判断课程是否小于3门
if(myForm.selectTo.length<3){
//获得当前选项的文字
var optionText=myForm.selectForm.options[index].text;
//获得当前选项的值
var optionValue=myForm.selectForm.options[index].value;
//在下拉列表框中添加选项
myForm.selectTo.options[myForm.selectTo.length]=new Option(optionText,optionValue);
myForm.selectForm.remove(index);
}else{
alert("最多能选取三门课程");
}
}
}
//删除选项
function delOption(){
var index=myForm.selectTo.selectedIndex;
if(index>-1){
//获得当前选项的文字
var optionText=myForm.selectTo.options[index].text;
//获得当前选项的值
var optionValue=myForm.selectTo.options[index].value;
myForm.selectForm.options[myForm.selectForm.length]=new Option(optionText,optionValue);
myForm.selectTo.remove(index);
}
}
第二个是二级联动
<html> <head> <title>15-22二级联动菜单</title> <meta http-equiv=content-type content=text/html;charset=gb2312> <script type=text/javascript src="15-22.js"></script> </head> <body onLoad="categoryOption()"> <form name="myForm" method="post"> <select name="category" onchange="patternOption(this.selectedIndex)"></select> <select name="pattern"></select> </form> </body> </html>
//以下数组用于创建显示在下拉列表框中的选项
var pattern=new Array();
pattern[0]=new Array();
pattern[0][0]=["家具","jiaju"];
pattern[0][1]=["玩具","wanju"];
pattern[0][2]=["办公","bangong"];
pattern[0][3]=["服装","fuzhuang"];
pattern[1]=new Array();
pattern[1][0]=["电影","dianying"];
pattern[1][1]=["电视剧","dianshiju"];
pattern[1][2]=["教育","jiaoyu"];
pattern[1][3]=["综艺","zongyi"];
pattern[2]=new Array();
pattern[2][0]=["小说","xiaoshuo"];
pattern[2][1]=["文学","wenxue"];
pattern[2][2]=["动漫","dongman"];
pattern[2][3]=["艺术","yishu"];
//以下数组用于创建第一个下拉列表框中的选项、
var category=new Array();
category[0]=["百货","baihuo",pattern[0]];
category[1]=["影视","yingshi",pattern[1]];
category[2]=["图书","tushu",pattern[2]];
//创建第一个下拉列表中的选项
function categoryOption(){
for(i=0;i<category.length;i++){
var option=new Option (category[i][0],category[i][1]);
myForm.category.options[i]=option;
}
patternOption(0);
}
function patternOption(index){
//删除下拉列表中所有选项
while(myForm.pattern.length>0)
myForm.pattern.remove(0);
//查找用于创建第二个下拉列表的数组
var arr=category[index][2];
for(i=0;i<arr.length;i++){
var option=new Option(arr[i][0],arr[i][1]);
myForm.pattern.options[i]=option;
}
}
相关推荐
JavaScript二级联动菜单是一种常见的网页交互设计，用于提供更精细化的导航或数据筛选。在电子商务网站、行政管理系统等中，我们经常可以看到这种菜单形式，它能够根据用户在一级菜单中的选择，动态加载并显示相应的...
javascript 二级联动菜单
在本案例中，"js二级联动菜单"是指利用JavaScript实现的一种下拉菜单功能，这种菜单通常出现在网站导航中，当用户选择一级菜单时，相关的二级菜单会自动展开，提供更具体的选项。 一级和二级联动菜单的实现主要涉及...
在IT领域，二级联动菜单是一种常见的用户界面设计元素，它常用于导航或数据筛选，特别是在网站和应用程序中。二级联动菜单通常由两个关联的下拉菜单组成，其中一个菜单的选择会影响另一个菜单的内容。这种交互设计...
总的来说，"asp无刷新二级联动菜单"是结合了ASP、JavaScript和Ajax技术，提供高效、流畅的用户界面，使得用户在选择地区或类别时无需等待整个页面刷新，极大地提升了网页的交互性和效率。这种技术在电商网站、信息...
总的来说，"ASP+ACC二级联动菜单"是一个结合了ASP动态脚本、Access数据库管理和前端交互设计的Web应用实例。通过这样的系统，用户可以在网页上方便地浏览和选择多级分类，同时开发者也能高效地管理和维护菜单数据。
在二级联动菜单的实现中，JavaScript主要负责监听一级菜单的`change`事件，当事件触发时，根据用户选择的一级菜单值，动态生成或更新二级菜单的内容。这通常涉及到DOM（文档对象模型）操作，包括`getElementById`、`...
在ASP（Active Server Pages）开发中，二级联动菜单是一种常见的交互设计，用于提供层次结构的选项选择，例如在产品分类、地区选择等场景。在这个案例中，我们将探讨如何使用ASP和数据库来实现一个二级联动菜单。 ...
在IT行业中，数据库关联的二级联动菜单是一种常见的交互设计，特别是在网页应用中，它能够帮助用户高效地筛选和选择信息。这个"一个和数据库关联的，二级联动菜单示例ajax实现"是一个实用的代码示例，它展示了如何...
在联动菜单中，用户选择一级菜单后，JavaScript通过AJAX发送请求到服务器，服务器返回新的二级菜单数据，然后JavaScript动态更新DOM树。这种方式提高了用户体验，减少了网络流量，同时降低了服务器压力。 3. **...
二级联动菜单 参考 javascript,为对二级菜单陌生的程序员提供范例。
总结起来，二级联动菜单是一种高效的用户界面设计，通过合理的数据库设计和前端实现，可以为用户提供便捷的导航和选择。这个资源“二级联动菜单 超强超简单的数据库”为开发者提供了实现这一功能的工具和数据，无论...
本文将深入探讨如何使用JavaScript和CSS创建一个可跳转回首页的二级联动菜单。 首先，我们需要理解CSS（层叠样式表）的作用。CSS是用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的样式语言。通过...
下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先，联动菜单的基本概念是：当用户在一个下拉菜单（一级菜单）中选择某个选项时，另一个下拉菜单（二级菜单）的内容会根据所选的选项动态...
在IT领域，二级联动菜单是一种常见的用户界面设计模式，它常用于网站或应用程序中，以帮助用户在多个相关选项间进行选择。在这个“二级联动菜单（jsp mysql）”的实例中，我们将探讨如何使用JavaServer Pages (JSP) ...
在网页设计中，二级联动菜单是一种常见的交互元素，常用于网站导航，它允许用户通过选择一级菜单后自动展现相关的二级菜单，提高用户体验和操作效率。 “二级联动菜单”是指在一个下拉菜单中，当用户选择一个选项时...
总结来说，"可跳转回首页的CSS二级联动菜单"是一个结合了CSS样式设计、JavaScript交互实现以及响应式布局技术的综合项目。通过学习和实践这样的案例，开发者可以提升在网页设计和开发中的专业技能，创建更加用户友好...
在网页开发中，二级联动菜单通常用于导航或数据筛选，为用户提供更为直观和便捷的操作体验。Ajax（Asynchronous JavaScript and XML）技术在此场景下发挥着关键作用，它允许页面不刷新即可更新部分内容，大大提升了...