js实现级联菜单(没有后台)

html代码:

<!-- js级联菜单 -->
<div id="cascMenu">
    <select id="select" onchange="getLocal(this.selectedIndex)">
        <option>请选择</option><!-- selectedIndex=0 -->
        <option>北京</option><!-- selectedIndex=1 -->
        <option>上海</option>
        <option>广州</option>
    </select>
    <select id="selectInfo">
        <option>请选择</option>
    </select>
<div>

js代码:

function getLocal(selectIndex){
    var arr=new Array();
    arr[0]=[new Option("请选择","1")];
    arr[1]=[new Option("东城区","1"),new Option("西城区","2"),new Option("朝阳区","3")];
    arr[2]=[new Option("黄埔区","1"),new Option("其他区","2")];
    arr[3]=[new Option("海珠区","1"),new Option("天河区","2"),new Option("白云区","3"),new Option("黄浦区","3")];
    var selectInfo=document.getElementById("selectInfo");
    selectInfo.innerHTML="";
  //为子下拉列表添加内容
    for(var i=0;i<arr[selectIndex].length;i++){
        selectInfo.options[i]=arr[selectIndex][i];
    }
}
时间: 2024-09-27 00:33:03

js实现级联菜单(没有后台)的相关文章

JS实战 &#183; 级联菜单选择省份和城市(两种)

DOM编程步骤.思路 1.定义界面: 通过html标签将数据进行封装: 2.定义一些静态样式: 利用css: 3.需要动态地完成的和用户的交互: a:明确事件源: b:明确事件,将事件注册到事件源上: c:通过JS的函数对象对事件进行封装: d:在处理过程中需要明确处理区域. 代码一如下: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta htt

前台JS(Jquery)调用后台方法 无刷新级联菜单示例

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页面: [html] view plaincopyprint? <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_De

使用json方式实现省市两级下拉级联菜单[原创]

本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境不多赘述,注意修改一下php的配置文件php.ini文件,将mysql.dll前面的那个“;”去掉,不然总会报数据库连接函数的错. 将以上配置好后就进入代码阶段了,闲话不多说,直接上代码: //2-7-3.php:<!DOCTYPE html> <html lang="en&quo

通达OA 太牛了!工作流表单设计中级联菜单原来可以这样实现(图文)

在做程序时,经常会有使用级联菜单这样的情况,比如选择行政区域这样的时候.使用通达的表单设计器来做这个需求时,一般都是怎样研究使用js来做级联菜单,略显复杂.今天突然发现原来通达在实现这个需求时居然有特别简单的实现方法,这里一块看一下. 做完的效果,看这里: 实现过程: 先添加一个下拉列表,关键地方就是在"关联子菜单名称"这里写上关联的下级菜单名字. 第二级菜单设置: 第三级菜单设置: 版权声明:本文为博主原创文章,未经博主允许不得转载.

全国三级城市级联菜单

Html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery

级联菜单

利用二维数组和jQuery实现级联菜单,代码如下: 1.html代码 <div class="form_class"> <label>地址</label> <select name="province" id="province></select> <select name="city" id="city"></select> <

[伪] 级联菜单,两级菜单

[伪] 级联菜单,两级菜单 这段时间需要做一个类似效果的一个菜单样式,所以就查了各种文档,各种百度各种搜索,的确也是搜到了不少的第三方组件,比如(CascadingMenuViewLib)就是其中一个,但是,我脑子笨,研究了3天左右的时间,改不成我需要得样子,So...我用我自己的方式,实现了这个效果(对了,还没有完全实现,因为TextView被点中的样式我还没有设置,不过这都是小事情了..) 在这里,我提供一个思路,代码很简单,当然,我也会附一些上来,好的,我首先说一下思路 首先,我们的xml

CSS+JS下拉菜单和纯CSS下拉菜单

一.CSS+JS下拉菜单 原理:一级菜单的li中包含二级菜单ul.在鼠标没有移上去时,二级菜单的ul是display:none的状态,鼠标一移上去变成display:block.改变这个display属性值是通过JS来实现.鼠标hover时,把整个二级菜单的ul给display出来,用到的事件onmouseonver.鼠标移出又把整个二级菜单的ul 给隐藏掉. nav-js.html文件 <!DOCTYPE html > <html> <head> <meta c

JS三级折叠菜单特效 自动收缩其它级

真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x