js 级联

最新推荐文章于 2022-04-27 22:12:33 发布
最新推荐文章于 2022-04-27 22:12:33 发布
阅读量378 收藏
点赞数
文章标签： javascript redirect website function html button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/epng54/article/details/2230589
版权

<%@ page contentType="text/html;charset=gb2312"%>
<html>
<head>
</head>
<body>
<form name="doublecombo">
<p>
<select name="example" size="1" onChange="redirect

(this.options.selectedIndex)">
<option>javascript</option>
<option>vbscript</option>
<option>java</option>
</select>
<select name="stage2" size="1">
<option value="http://wsabstract.com">Website

Abstraction</option>
<option

value="http://www.dynamicdrive.com">Dynamicdrive.com</option

>
<option value="http://javascript.internet.com">javascript</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>
<!--
/*
Double Combo Script Credit
By Website Abstraction (www.wsabstract.com)
Over 200+ free javascripts here!
*/
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("Website

Abstraction","http://wsabstract.com")
group[0][1]=new Option

("Dynamicdrive.com","http://www.dynamicdrive.com")
group[0][2]=new Option

("javascript","http://javascript.internet.com")
group[1][0]=new Option("万旭javascript仓

库","http://www.wanxu.com")
group[1][1]=new Option

("javascript2000","http://www.javascript2000.com")
group[1][2]=new Option("无忧脚本","http://www.51js.com")
group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")
var temp=document.doublecombo.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>
</body>
</html> 

 

 

 

<html>
<head>
<title>简单级联菜单</title>
</head>
<body>
<!— group 的下拉列表-------------->
<select name="sltGroupID"  
onChange="javascript:change_select(this.options[this.selectedIndex].value)">
<option value="0">用户组0</option>
<option value="1">用户组1</option>
<option value="2">用户组2</option>
<option value="3">用户组3</option>

</select>  
<!— user 的下拉列表-------------->
<select name="sltUserID">  
<option value="0">用户……a1</option>

</select>
<script language = "JavaScript">  
//读入 rsUser的数据
arrSelect=new Array();
arrSelect[0] = new Array("用户……a0",0,0);
arrSelect[1] = new Array("用户……b1",1,1);
arrSelect[2] = new Array("用户……c2",2,2);
arrSelect[3] = new Array("用户……d1",3,3);
arrSelect[4] = new Array("用户……d2",3,2);
//更新 user 下拉列表的函数
function change_select(selvalue)   
{  
document.all.sltUserID.length=0; //清除  
var i;
for(i=0;i<arrSelect.length;i++)  
{
   if(arrSelect[i][1]==selvalue)  
   {
    var newOption=new Option(arrSelect[i][0],arrSelect[i][2]);
    document.all.sltUserID.add(newOption);
   }
}
}
</script>
</body>
</html>

Bruce54
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
级联js操作
11-11
纯document，对粉嫩新人来说有启发
纯JS实现级联
04-15
用JS实现了级联，未涉及到ajax 或jquery ajax；感觉方法很新颖，特传上来供大家参考。
js级联
Nightliar的博客
01-14 408
//选择地址 var cityList=new Array(); cityList['湖北省']=['武汉市','荆州市','孝感市','襄樊市']; cityList['湖南省']=['长沙市','常德市','澧县市','岳阳市']; cityList['河南省']=['郑州市','信阳市','洛阳市','新乡市']; function allcity(){
js 中的级联操作
林先生学习博客
08-02 1356
方法过程 通过获取第一个select.selectedIndex 获取下拉列表的索引 返回值与创建的二位数组下标对应 遍历二维数组赋值给创建新的option var city =[[],["广州","深圳","揭阳"],["厦门","福州","莆田"],["南宁","玉林","河池"]]; function showis(select1){ var optioncity = do...
js实现级联效果
yinyueyu007的博客
02-19 457
https://js-omnxgb.stackblitz.io/
纯JS级联下拉
08-08
纯JS级联下拉框，可以帮助拓展思路
Cascader.js级联选择器
最新发布
01-25
Cascader.js是一款基于JavaScript的级联选择器组件，主要用于在Web应用中实现多级联动下拉菜单的效果。这种组件在数据层级关系较为复杂的场景中尤为常见，例如地区选择、产品分类、部门结构等。Cascader.js以其轻量...
js 级联选择地区
12-03
在JavaScript和jQuery的世界里，级联选择是一种常见的交互设计，...总之，"js 级联选择地区"是一种实用的前端交互设计，结合JavaScript和jQuery可以轻松实现。理解其工作原理和实现方法对于提升网页交互体验至关重要。
JavaScript实现级联菜单的方法
10-24
主要介绍了JavaScript实现级联菜单的方法,涉及javascript页面元素操作的相关技巧,需要的朋友可以参考下
js级联菜单示例
09-15
在JavaScript的世界里，级联菜单（Cascading Menu）是一种常见的交互设计，它通常用于下拉选择框，其中的选择项会根据用户先前的选择动态改变。本示例将深入讲解如何利用jQuery库来实现这种功能。jQuery是JavaScript...
js下拉级联例子
04-17
NULL 博文链接：https://lihong11.iteye.com/blog/1832040
javaScript实现级联效果的两种写法
03-30
NULL 博文链接：https://vera-sq.iteye.com/blog/1319965
JS——级联的分析
进击的葱
01-11 487
描述： JS——级联的分析 实现： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&amp
用js实现的级联菜单
蝈蝈
11-13 928
用js实现的级联菜单   New Document var city=[  ["北京","天津","上海","重庆"],  ["南京","苏州","南通","常州"],  ["福州","福安","龙岩","南平"],  ["广州","潮阳","潮州","澄海"],  ["兰州","白银","定西","敦煌"]  ]; function getCity(){
JS实现级联菜单
qq_60213361的博客
12-05 976
1.首先应该添加两个下拉列表并设置id属性来方便操作 1 <select id="country"> 2 <option>国家</option> 3 </select> 4 <select id="city"> 5 <option>城市</option> 6 </select> 2.js代码中首先需要声明国家和城市两个数组 var country = ['中国', '美国','英国']
js 级联select
南方有岛
10-17 481
参考：http://www.codefans.net/jscss/code/3255.shtml    做了修改
js级联菜单
SR0101020321的博客
12-05 484
用js写级联菜单
javascript之级联列表
m0_67932301的博客
04-27 1499
一、做一个省市级联列表 1.写的顺序：先写结构再写样式最后写逻辑 1）结构 <select> <option>河北</option> <option>河南</option> <option>湖北</option> </select> <select> <option>沧州</option> <option>洛阳</option> <opti
js动态生成级联下拉列表
LHB的博客
02-21 1354
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>级联选择器练习</title> <script> window.onload = function(){ var ojson=[{'province':'河北省','city':['石家庄','石家
javascript级联菜单怎么写
08-16
### 回答1： 你可以使用 JavaScript 和 HTML 来实现级联菜单。首先，你需要创建一个包含所有选项的数组，然后使用 JavaScript 动态地创建下拉菜单。当用户选择第一个下拉菜单中的选项时，使用 JavaScript 更新第二个下拉菜单中的选项。具体实现方法可以参考以下代码： HTML 代码： ``` <select id="firstMenu" onchange="updateSecondMenu()"> <option value="">请选择</option> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <select id="secondMenu"> <option value="">请选择</option> </select> ``` JavaScript 代码： ``` var menuOptions = { option1: ["子选项1", "子选项2", "子选项3"], option2: ["子选项4", "子选项5", "子选项6"], option3: ["子选项7", "子选项8", "子选项9"] }; function updateSecondMenu() { var firstMenu = document.getElementById("firstMenu"); var secondMenu = document.getElementById("secondMenu"); var selectedOption = firstMenu.options[firstMenu.selectedIndex].value; while (secondMenu.options.length) { secondMenu.remove(); } var menuItems = menuOptions[selectedOption]; if (menuItems) { var i; for (i = ; i < menuItems.length; i++) { var menuItem = new Option(menuItems[i], i); secondMenu.options.add(menuItem); } } } ``` 在这个例子中，我们创建了一个名为 menuOptions 的对象，其中包含了每个选项的子选项。当用户选择第一个下拉菜单中的选项时，我们使用 updateSecondMenu 函数来更新第二个下拉菜单中的选项。我们首先获取第一个下拉菜单和第二个下拉菜单的元素，然后获取用户选择的选项。接着，我们清空第二个下拉菜单中的选项，并根据用户选择的选项更新第二个下拉菜单中的选项。最后，我们将新的选项添加到第二个下拉菜单中。 ### 回答2： JavaScript级联菜单的实现可以通过以下步骤进行： 1. 首先，在HTML文件中创建一个容器元素，用来容纳级联菜单。例如： ``` <div id="menu"></div> ``` 2. 在JavaScript代码中定义一个包含菜单选项的数据结构。这可以是一个嵌套的对象或数组，每个选项都包含一个值和一个与之关联的子选项数组，例如： ``` var menuData = [ { value: "选项1", children: [ { value: "子选项1-1" }, { value: "子选项1-2" } ] }, { value: "选项2", children: [ { value: "子选项2-1" }, { value: "子选项2-2" } ] } ]; ``` 3. 创建一个函数来动态生成级联菜单。该函数应该接受一个父级菜单选项作为参数，并在该选项下生成子菜单。例如： ``` function generateMenu(parent) { var menu = document.createElement("select"); // 为菜单添加选项 for (var i = 0; i < parent.children.length; i++) { var option = document.createElement("option"); option.text = parent.children[i].value; option.value = i; menu.appendChild(option); } // 为菜单添加事件监听器 menu.addEventListener("change", function() { var selectedIndex = menu.options[menu.selectedIndex].value; if (parent.children[selectedIndex].children) { generateMenu(parent.children[selectedIndex]); } }); // 将菜单添加到容器元素中 document.getElementById("menu").appendChild(menu); } ``` 4. 最后，在JavaScript中调用`generateMenu`函数来初始化级联菜单。例如： ``` generateMenu({ children: menuData }); ``` 以上就是实现JavaScript级联菜单的基本步骤。你可以根据需要自定义菜单的样式和交互行为。 ### 回答3： JavaScript级联菜单的实现是通过动态改变下拉菜单选项的方法来实现的。下面是一个简单的例子，说明如何使用JavaScript来实现级联菜单。 首先，我们需要创建HTML结构，包括一个用于选择的父级下拉菜单和一个用于显示子级下拉菜单的元素。如下所示： ```html <select id="parentMenu" onchange="changeChildMenu()"> <option value="">请选择父级菜单</option> <option value="1">菜单1</option> <option value="2">菜单2</option> <option value="3">菜单3</option> </select> <div id="childMenu" style="display: none;"> <select id="childSelect"> <option value="">请选择子级菜单</option> </select> </div> ``` 接下来，我们需要编写JavaScript代码来实现级联菜单的效果。我们可以使用`change`事件来监听父级下拉菜单的变化，并根据所选值来动态改变子级下拉菜单的选项。如下所示： ```javascript function changeChildMenu() { var parentValue = document.getElementById('parentMenu').value; var childSelect = document.getElementById('childSelect'); // 清空子级下拉菜单的选项 childSelect.innerHTML = '<option value="">请选择子级菜单</option>'; // 根据所选值动态添加子级下拉菜单的选项 if (parentValue === '1') { childSelect.innerHTML += '<option value="11">子菜单1</option>'; childSelect.innerHTML += '<option value="12">子菜单2</option>'; } else if (parentValue === '2') { childSelect.innerHTML += '<option value="21">子菜单3</option>'; childSelect.innerHTML += '<option value="22">子菜单4</option>'; } else if (parentValue === '3') { childSelect.innerHTML += '<option value="31">子菜单5</option>'; childSelect.innerHTML += '<option value="32">子菜单6</option>'; } // 显示子级下拉菜单 document.getElementById('childMenu').style.display = 'block'; } ``` 在上面的代码中，我们使用了`innerHTML`属性来动态改变子级下拉菜单的选项。根据所选的父级菜单的值，我们通过添加新的`option`元素来动态改变子级菜单的选项。 最后，通过调用`changeChildMenu()`函数，我们可以在父级下拉菜单的选项改变时触发级联效果。 以上就是用JavaScript实现级联菜单的基本步骤。根据实际需求，你可以修改代码来适应不同的菜单结构和选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值