两级联动下拉菜单

最新推荐文章于 2021-01-28 19:14:55 发布
最新推荐文章于 2021-01-28 19:14:55 发布
阅读量519 收藏 1
点赞数
分类专栏： css html js代码 文章标签： function javascript 单机游戏 网络游戏 影视 html

 <html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style>
body,select
{
font-size:9pt;
font-family:Verdana;
}
a
{
color:red;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined") return false;
return true;
}

function change(v){
var str="0";
for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options[1].selected = true;
}
}
if(++v<s.length){change(v);}
}
}

var dsy = new Dsy();

dsy.add("0",["运动","音乐","游戏","影视","模型","动漫","阅读","热点话题","宠物","江苏省"]);

dsy.add("0_0",["球类运动","非球类运动","其他"]);
dsy.add("0_1",["流行乐","非流行乐","其他"]);
dsy.add("0_2",["网络游戏","单机游戏","其他"]);
dsy.add("0_3",["电影","电视剧","其他"]);
dsy.add("0_4",["动漫模型","电影模型","其他"]);
dsy.add("0_5",["动画","漫画","其他"]);
dsy.add("0_6",["书籍","报纸","杂志","其他"]);
dsy.add("0_7",["恶搞类","时尚类","其他"]);
dsy.add("0_8",["有生命宠物","其他"]);
dsy.add("0_9",["南京","扬州","苏州","无锡"]);
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>


var s=["s1","s2"];
var opt0 = ["请选择","请选择"];
function setup()
{
for(i=0;i<s.length-1;i++)
document.getElementById(s[i]).οnchange=new Function("change("+(i+1)+")");
change(0);
}
//-->
</SCRIPT>
</head>
<body bgcolor="#E0E0E0" onLoad="setup()">

<form name="frm">
<select id="s1"><option></option></select>
<select id="s2"><option></option></select>
</form>
</body>
</html>

myktv
关注
专栏目录
JavaScript之AJAX实现二级联动菜单(jsp+js+servlet
m0_66789766的博客
04-12 1029
请选择大师作品 2.2、1.js文件源码如下： var xhr; //根据不同浏览器创建xhr对象的函数 function creatXHR () { if (typeof(XMLHttpRequest)!=“undefined”) { return new XMLHttpRequest(); //针对IE7及四大浏览器 }else if (typeof ActiveXObject !=“undefined”) { if (typeof arguments.callee..
二级联动菜单
weixin_34010949的博客
11-28 74
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content=
js实现二级联动菜单
03-11 1512
下面是一段js实现二级联动菜单的代码，供初学者使用。文件名：index.html,代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Co
用innerHTML实现二级联动菜单
de_debug的博客
07-20 663
最近小编我在做二级联动菜单的时候，上网查了一些资料，发现他们用的是二位数组，发现他们写的有点麻烦，对于小编我这种初入JS的小白来说，好费力。所以自己就琢磨着想通过获取select标签中value值来相应的往另一个select标签中插入option标签不就行了么？果然没问题！代码附上： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;met...
全国省市县无刷新多级关联菜单
domino的专栏
08-02 3587
需要的朋友可以把下面这段代码拷贝过去使用，保存成网页格式即可全国31个省的所有市县都有省市县关联菜单body,select{ font-size:9pt; font-family:Verdana;}a{ color:red; text-decoration:none;}a:hover{ text-decoration:underline;}function Dsy(){ this.Items =
php代码实现二级联动下拉菜单效果
11-19
在网页设计中，二级联动下拉菜单是一种常见的交互元素，常用于分类选择或者地区筛选等场景。这种功能的实现通常涉及到前端和后端的交互，其中PHP作为后端语言，负责处理数据并返回给前端。本篇文章将详细介绍如何...
全国省市二级联动下拉菜单 js版
10-22
全国省市二级联动下拉菜单是基于Web前端...以上知识点详细解释了如何通过JavaScript实现全国省市二级联动下拉菜单，并提供了代码示例和相应的技术细节。这些内容对于前端开发者在开发类似功能时具有较大的参考价值。
基于javascript实现全国省市二级联动下拉选择菜单
10-22
在如今的Web开发中，实现省市二级联动下拉菜单是一个常见需求，它能够提高用户填写表单时的便捷性。在本实例中，我们通过使用JavaScript技术，来实现一个全国省市二级联动下拉选择菜单，其中涉及到了HTML、...
Access数据库-二级下拉菜单制作
03-29
Access数据库-二级下拉菜单制作
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
01-19
二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果：当选择大类时，小类下拉框里的选项内容...
jsp五级联动菜单mysql_JS实现的五级联动菜单效果完整实例
weixin_29079643的博客
01-28 460
本文实例讲述了JS实现的五级联动菜单效果。分享给大家供大家参考，具体如下：js实现多级联动的方法很多，这里给出一种5级联动的例子，其实可以扩展成N级联动,在做项目的时候碰到了这样一个问题但是有不能从数据库中动态的加载这些选项，所以只有想办法从单个的页面着手来处理了，应为项目的表单是动态产生的，所以需要每个流程的设计过程中需要有单独的页面来处理，这样就决定了不能改变已有的业务逻辑来实现多级表单的联动...
下拉选择关联
chris家
01-20 9086
贴上某一网友的实现代码。省、市、县的关联．area.js--------------js实现function Dsy() { this.Items = {}; }Dsy.prototype.add = function(id,iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function(id) { if(typeof(th
前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动
Java_53的博客
05-17 674
二级联动菜单 select 对象 一个<select>标记，对应一个select对象； select对象的属性 1,options[] :设置或返回下拉列表中<option>标记构成的数组； 2,selectedIndex :设置或选中指定<option>的索引号； 3,length :指定下拉列表中<option>标记的个数； 4,name :元素名称； option对象 一个<option>标记，对应一个option对象； option 对象属
Web前端开发实战1：二级下拉式菜单之CSS实现
热门推荐
life is wonderful
12-30 3万+
二级下拉式菜单在各大学校网站，电商类网站，新闻类网站等大型？网站很常见，那么它的实现原理是什么呢？ 学习了Web前端开发的知识后，我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的，原理和流程 还是一样的，今天开始做一些简单的二级下拉式菜单。        横向一级菜单我们见到的很多，如下图所示是：        二级下拉菜单图：        二级下拉菜单是
JavaScript实现二级联动下拉菜单
MistyWood的博客
09-19 9804
最近学习前端js，做了一个二级联动下拉菜单。二级下拉菜单的内容随着一级下拉菜单选项的更改而更改。菜单的内容是手动存在js的数组里的，随便写了几个数据。 效果图： 实现源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> ...
javascript 二级联动
weixin_30849403的博客
07-23 59
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body,select { font-size:9pt; font-family:Verdana; }...
Java实现两级联动下拉菜单
"本资源主要介绍了如何在Java中实现两级级联下拉菜单的功能，通过Struts框架进行后台处理，以及JavaScript进行前端交互。" 在Java Web开发中，常常需要实现级联选择的效果，例如在城市选择中，先选择省份再选择城市...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值