`

用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>  
分享到：
| 删除表中的数据
评论
发表评论

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

相关推荐

    js实现的三级下拉列表联动

    js实现的三级联动下拉列表 三级关链菜单通用版

    Bootstrap布局组件教程之Bootstrap下拉菜单

    这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...

    javascript代码常用大全

    5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目) 5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 6、树型结构。 6.1 asp+SQL版 ...

    javascript 常用代码大全

    5.5 两层或多层次的下拉菜单 5.6 仿ie菜单的按钮。（效果如rongshuxa.com的导航栏目) 5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 6、树型结构。 6.1 asp+sql版 ...

    作业-歌帝梵官网首页.zip

    二级菜单：在导航栏中添加下拉菜单或弹出菜单，实现二级菜单的功能。当用户悬停或点击主菜单时，显示与之相关的子菜单，使用户能够更方便地找到所需的信息或页面。 鼠标滑过文字变色：为首页的一些关键文字或链接...

    javascript常用代码大全.html

    5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目) 5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 6、树型结构。 6.1 asp+SQL版 6.2 ...

    javascript常用代码

    5.5 两层或多层次的下拉菜单 5.6 仿ie菜单的按钮。（效果如rongshuxa.com的导航栏目) 5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 6、树型结构。 6.1 asp+sql版 ...

    Bootstrap每天必学之js插件

    1、Bootstrap 插件概览 在前面 布局组件 章节中所讨论到的组件仅仅是个开始。...Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。

    Interactive-form-v3：交互式JavaScript提交表格

    互动形式该Web表单接受并验证用户输入以便注册会议。 必填字段包括： 名称：a）不能为空，必须实时验证。 唯一错误消息。 b）不能包含经过实时... b）如果在下拉菜单中选择了“其他”，则在标题部分显示“其他”字段。

    conf_registration:该项目使用了jquery和vanilla javascript的组合。 如果禁用了js，则该页面仍然有效。 显示所有错误，但注册按钮“请修复错误”错误除外

    该项目使用了jquery和vanilla javascript的组合。 如果禁用了js，则该页面仍然有效。 显示除注册按钮“ Please fix errors”以外的所有错误。 栏目 每个部分都经过验证，并且将引发至少一个错误。 文本输入模糊时会...

    projectiveplane:互动投影飞机

    您也可以从下拉菜单中选择一些示例。 您可以通过以下方式来更改坐标系（或等效地通过投影变换来变换曲线）：拖动坐标三角形的顶点或使用滚轮，同时将指针保持在顶点之一上方（滚动将变换矩阵的相应列乘以标量）。 ...

    Veeva Web2PDF（Beta）「Veeva Web2PDF (Beta)」-crx插件

    动态元素是网页的任何方面，在页面加载时可能不会立即显示，例如图像滑块，下拉菜单或调查表。这些元素通常基于JavaScript，可能需要一些用户交互。您可以使用我们的新提示模式浏览网站并删除提示。只需右键单击要...

    Veeva Web2PDF (Beta)-crx插件

    动态元素是网页的任何方面，在页面加载时可能不会立即显示，例如图像滑块，下拉菜单或调查表。 这些元素通常基于JavaScript，可能需要一些用户交互。 您可以使用“提示”模式浏览网站并删除提示。 右键单击要添加...

    WebdeskUI:仿桌面应用的后台管理模板，没有基于Vue，也没有基于JQuery

    包括常用控件，登录、下拉菜单、树形菜单、选项卡、弹窗等；内页采用IFrame嵌套。 开发初衷 为公司主打产品《微厦在线学习系统》的管理界面升级而开发。例如，课程管理打开后，还要有章节管理、试题管理、价格管理、...

    Solar-System-Model-WebGL:WebGL 中的太阳系模型

    在右上角的下拉菜单中有多个用于控制系统的设置。 这些控件包括编辑不同的大小和时间尺度、显示轨道以及设置相对位置。 单击左上角附近的日期字段可以更改当前日期。 Oribt 头寸将根据输入的日期计算。 用户还可以...

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