`

用javascript实现下拉菜单互动

JavaScriptHTML 
阅读更多
js 代码
  1. <html>   
  2. <head><title>test select changed</title></head>   
  3. <script language='javascript'>   
  4.   
  5. // 更新二级服务类型   
  6. function updateSubServer() {   
  7.     var arrays = [['100', 'aa', '101'],['100', 'bb','102'],['200', 'cc', '201'], ['200', 'dd', '202']];   
  8.     clear_sub_server();    
  9.     var sub_servers2 = document.getElementById("sub_server");      
  10.     var option_1 = null;   
  11.     for (var i = 0; i < arrays.length; i++) {   
  12.         option_1 = document.createElement("option");   
  13.         if (document.forms[0].server.options[document.forms[0].server.selectedIndex].value == arrays[i][0]) {   
  14.             option_1.text = arrays[i][1];   
  15.             option_1.value = arrays[i][2];   
  16.             sub_servers2.add(option_1);   
  17.         }   
  18.     }   
  19. }   
  20.   
  21. // 清除二级服务类型，只留一个空的选择项   
  22. function clear_sub_server() {   
  23.     var sub_servers = document.getElementById("sub_server");   
  24.     while(sub_servers.childNodes.length > 0) {   
  25.         sub_servers.removeChild(sub_servers.childNodes[0]);   
  26.     }   
  27.     var option_2 = document.createElement("option");   
  28.     option_2.text = "请选择二级服务类型";   
  29.     option_2.value = "";   
  30.     sub_servers.add(option_2);   
  31. }   
  32.   
  33. // 输入校验   
  34. function checkInput() {    
  35.     if (document.forms[0].server.value == '') {   
  36.         alert('请输入服务类型!');   
  37.         return false;   
  38.     }   
  39.     if (document.forms[0].sub_server.value == '') {   
  40.         alert('请输入二级服务类型!');   
  41.         return false;   
  42.     }   
  43.     document.forms[0].submit();   
  44. }   
  45. </script>   
  46. <body>   
  47. <form name='form1' action='#' method='get' onsubmit="checkInput();return false;">   
  48.     服务类型：<select name='server' id='server' onchange='updateSubServer();'>   
  49.         <option value=''>请选择服务类型</option>   
  50.         <option value='100'>第一个服务</option>   
  51.         <option value='200'>第二个服务</option>   
  52.     </select>   
  53.     二级服务类型：<select name='sub_server' id='sub_server'>   
  54.         <option value=''>请选择二级服务类型</option>   
  55.     </select>   
  56.     <input type='submit' />   
  57. </form>   
  58. </body>   
  59. </html>  
分享到：
| 删除表中的数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dreanweaver下拉菜单全攻略，下拉菜单互动

    2. **参考“下拉菜单互动.txt”**：这个文本文件可能包含了一些关于下拉菜单互动实现的代码示例或技巧，可以作为实际操作的指南。 通过学习和实践，你将能够熟练地在Dreamweaver中创建功能完备且具有互动性的下拉...

    用JSP+JavaScript打造二级级联下拉菜单

    本文将深入解析如何利用JSP与JavaScript实现一个功能丰富的二级级联下拉菜单，这是一个在电商、新闻门户等网站上广泛使用的功能，用于分类展示商品或文章。 ### 一、JSP与JavaScript简介 - **JSP**：是一种基于...

    jQuery多级下拉菜单支持多级下拉列表菜单.zip

    jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现动态、交互式的页面效果，其中包括多级下拉菜单的创建。这个名为"jQuery多级下拉菜单支持多级下拉列表菜单"的资源，就是专门为商城网站或企业网站设计的一...

    javascript经典特效---带图片下拉菜单.rar

    在JavaScript编程领域中，"带图片下拉菜单"是一种常见的交互设计，用于提升网站或应用程序的用户体验。这种特效使得用户可以通过点击一个主菜单项来展开一个包含多个子选项的下拉菜单，其中每个子选项可能伴有相关的...

    jQuery个性动画二级下拉导航菜单.rar

    例如，开发者可能使用了`hover()`函数来监听鼠标悬停事件，然后通过`slideToggle()`或`fadeIn()`/`fadeOut()`方法实现下拉菜单的显示与隐藏。这些动画效果使得菜单的展开和收起过程更加自然，增强了用户体验。 在...

    弹出下拉菜单

    在网页设计中，交互性和用户体验是非常重要的因素，而弹出下拉菜单是实现这一目标的常见方式之一。本文将深入探讨如何使用Jquery技术来创建一个鼠标悬停时弹出，鼠标移开后关闭的下拉菜单，并提供相关组件的详细讲解...

    jquery下拉全屏导航菜单（源码）

    总之，"jquery下拉全屏导航菜单（源码）"提供了一种实用的网页设计资源，通过jQuery实现的动态下拉全屏菜单可以为你的网站增添专业且互动的导航体验。理解并掌握其工作原理，不仅可以提升你的前端开发技能，还能让你...

    25 个免费的 HTML5 CSS3 jQuery 下拉菜单

    在这个主题中，“25个免费的HTML5 CSS3 jQuery下拉菜单”是一个集合，它包含了多种使用这些技术实现的下拉菜单模板，供开发者在构建网站时选用。 HTML5作为最新的超文本标记语言标准，提供了更强大的语义化元素，如...

    横向下拉菜单源码

    标题中的"横向下拉菜单源码"指的是实现这一功能的编程代码，可能是用JavaScript、CSS和HTML等前端技术编写的。开发者可以通过这些源码理解横向下拉菜单的工作原理，并根据自己的需求进行定制和修改。西部数码网站...

    code下拉菜单

    通过HTML、CSS和JavaScript的结合，开发者可以创建出既美观又实用的下拉菜单，提高用户与应用的互动体验。在实际应用中，不断优化和调整下拉菜单的设计，以适应不断变化的用户需求和技术发展，是提升产品品质的关键...

    导航菜单,下拉菜单,手风琴菜单,JS下拉菜单,jQuery下拉菜单,导航下拉菜单特效

    本文将深入探讨“导航菜单”、“下拉菜单”、“手风琴菜单”以及它们在JavaScript（JS）和jQuery中的实现，同时也会介绍相关的特效。 首先，让我们了解“导航菜单”。导航菜单通常位于网页的顶部或侧边，它列出了...

    DIV+CSS下拉菜单,适合参考学习

    在下拉菜单中，我们通常使用`:hover`来触发下拉菜单的显示和隐藏，增加互动性。 4. **层级关系**：利用CSS的`z-index`属性可以调整元素的堆叠顺序，确保下拉菜单出现在其父元素之上，不会被遮挡。 5. **过渡和动画...

    jQuery自适应横排下拉菜单导航代码

    该代码的核心在于实现横排下拉菜单。这种布局方式使得主菜单选项水平排列，当用户悬停在某个菜单项上时，相应的子菜单会垂直下拉显示。这种设计既节省空间，又保持了清晰的层级结构。在响应式设计中，这样的菜单尤为...

    多功能下拉菜单.zip

    在这款多功能下拉菜单中，它利用了jQuery库，这是一款轻量级的JavaScript库，提供了丰富的DOM操作、事件处理和动画效果，使得动态交互变得更加简单。 其次，jQuery响应式设计是关键点。响应式设计允许网页根据用户...

    超简单且炫酷的下拉菜单

    最后，为了让下拉菜单更加互动和吸引人，我们可以使用JavaScript或jQuery添加更复杂的功能，比如点击事件、动态加载内容等。例如，使用jQuery改变鼠标悬停事件为点击事件： ```javascript $(document).ready...

    仿应用程序下拉菜单

    这可能涉及到使用自定义JavaScript库（如menuauto.jse），它包含了实现下拉菜单逻辑的代码。文件menuauto.htm可能是包含HTML结构的页面，用于展示和测试这个下拉菜单，而menuauto.jse则可能是这个自定义菜单的核心...

    注册验证及javascript实现级联菜单

    接下来，我们将讨论级联菜单（也称为下拉菜单）的实现。级联菜单常用于导航栏或选择项，它允许用户按层次结构选择选项。在征婚网站中，可能有如地区、年龄、性别等属性，级联菜单能帮助用户更方便地筛选和查找合适的...

    Flash效果渐隐下拉菜单特效.rar

    开发者可以在这个文件中看到如何将JavaScript代码与HTML元素结合，实现下拉菜单的显示和隐藏。同时，HTML结构对于下拉菜单的布局和层次关系至关重要，通常会使用`&lt;ul&gt;`和`&lt;li&gt;`标签来构建菜单层次。 `说明.htm`文件...

    二级下拉菜单特效

    本项目提供的"二级下拉菜单特效"旨在实现一种无过度效果、点击后即刻显示的二级导航功能，同时具有两列布局的可能性，以便适应不同的内容需求，并且设计简洁，方便后续的二次开发和修改。 首先，我们来探讨一下下拉...

    css3仿小米官网导航下拉菜单代码.zip

    总的来说，这个"css3仿小米官网导航下拉菜单代码"示例是一个结合了CSS3和JavaScript技术的互动菜单实现，它展示了如何利用现代Web技术来创建具有专业感和用户体验友好的导航系统。通过学习和理解这段代码，开发者...

Magicbox
Global site tag (gtag.js) - Google Analytics