<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> test </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<style type="text/css">
<!--
body{margin:0;padding:5px;}
//-->
</style>
</HEAD>
<BODY>
<select id="search_categroy" onchange="javaScript:selectCategory(this.selectedIndex);">
<option onclick="javascript:addoptions(',1,2')">category1</option>
<option onclick="javascript:addoptions(',3,4,5,6')">category2</option>
</select>
<select id="search_forum">
<option value="">--select--</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</select>
<script type="text/javascript">
var categoryWithForums={};
(function(){
var selectForums=document.getElementById('search_forum');
for(var i=0;i<selectForums.options.length;i++){
categoryWithForums['forum'+selectForums.options[i].value]=selectForums.options[i];
}
selectForums.options.length=0;
selectCategory(0);
})();
function selectCategory(index){
var selectCategories=document.getElementById('search_categroy');
if(selectCategories.options.length==0)return;
selectCategories.options[index].selected=true;
selectCategories.options[index].onclick();
}
function addoptions(ids,select){
var selectForums=document.getElementById('search_forum');
selectForums.options.length=0;
ids=ids.replace(" ").split(",");
for(var i=0;i<ids.length;i++){
selectForums.options.add(categoryWithForums['forum'+ids[i]]);
if(ids[i]==select){selectForums.options[selectForums.options.length-1].selected=true;}
}
selectForums.focus();
}
</script>
</BODY>
</HTML>
分享到：
相关推荐
本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
本话题主要关注的是使用jQuery实现的二级联动下拉菜单，这是一种常见的交互设计，常用于网站的筛选或导航功能。下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先，联动菜单的基本概念是...
在网页开发中，"select二级联动"是一种常见的交互设计，用于实现下拉菜单之间的关联选择。这种技术在处理如地区选择、分类导航等场景时尤为适用。在这个实例中，我们看到一个简单的二级联动示例，它由两个下拉菜单...
压缩包中的“js全国城市三级联动下拉列表”可能包含了一个JavaScript文件，该文件已经封装了上述逻辑。我们可以引入这个JS文件到HTML中，通过调用提供的函数初始化和绑定事件，如： ```html <script src="js全国...
总的来说，通过jQuery实现城市二级联动是一项实用的前端技能，它利用了DOM操作、事件监听和数据处理等基本概念，同时展示了JavaScript和jQuery结合的强大功能。在开发过程中，我们可以根据实际需求进行适当的修改和...
在网页开发中，"select三级联动"是一种常见的交互设计，主要应用于地址选择或者分类筛选等场景，例如在电商网站上填写收货地址时选择省份、城市、区县。这种联动效果使得用户能够逐级筛选，方便快捷地找到目标选项。...
在二级联动菜单的场景中，jQuery可以帮助我们更高效地处理用户与<select>元素的交互，如改变第一级菜单时，无需整个页面刷新，仅更新第二级菜单的内容。 接下来，AJAX（Asynchronous JavaScript and XML）是构建...
标题中的“省市二级联动代码JS”指的是在网页开发中实现的一种交互功能，它允许用户在选择省份后，自动更新下拉菜单以显示对应省份的城市，从而实现两级联动的效果。这种功能通常用于地址输入或者区域筛选等场景，...
在ASP中，二级联动和三级联动下拉框是常见的功能，通常用于实现数据的筛选和过滤，例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...
总之，“js二级联动_精简实用版”是一个适用于快速实现省市级联功能的解决方案，它结合了JavaScript的基本概念和实际应用场景，是提升用户体验的一个有效工具。对于想要学习或使用这一功能的开发者来说，这是一个很...
压缩包中的"js省市区三级联动.rar"和"Js省市二级联动.rar"文件可能包含了实现这些功能的示例代码，可以下载后参考学习。通过理解并实践这些代码，你可以更好地掌握JS在构建省市区联动菜单方面的技巧。
本示例中，我们关注的是“js实现的二级菜单联动”，特别是省市联动的应用。省市联动意味着当用户在一级菜单（省份）中选择一个选项时，二级菜单（城市）会动态更新显示与所选省份相关联的城市列表。这种功能可以极大...
在网页开发中，"js省市二级联动"是一个常见的交互功能，尤其在地址选择、表单填写等场景下。这个功能允许用户首先选择省份，然后根据所选省份动态加载对应的市，形成一个连贯的选择流程。这里我们将深入探讨如何实现...
实现二级联动的核心在于JavaScript（JS）和HTML的配合。以下将详细介绍这个过程中的关键知识点： 1. **HTML结构**： - 首先，需要创建两个`<select>`元素，分别代表省份和城市。每个`<option>`标签代表一个具体的...
三级联动指的是在一个表单中，当用户在第一级（省）选择后，第二级（市）会自动更新为与所选省相关的选项，接着在市选择后，第三级（区）也会相应更新。这种设计常用于地址输入，以提高用户体验。 2. **HTML5**： ...
在提供的`fzzx.zip`压缩包中，包含了一个名为`a.html`的文件，这个文件很可能是用来展示如何实现layui下拉框二级联动的示例代码。打开这个HTML文件，我们可以看到一个包含两个下拉框的页面，第一个下拉框（一级）...
在网页开发中，二级联动是一种常见的交互设计，通常用于下拉菜单或选择列表，例如省份与城市的选择。这种设计能够帮助用户在两个关联的列表之间进行互动，根据第一个列表（通常是大分类）的选择，动态更新第二个列表...
二级联动通常指的是在一个下拉列表（Select）中选择一个选项后，另一个下拉列表会根据前一个选项的值动态加载相关数据，这种功能在地区选择、分类筛选等场景中非常常见。 本压缩包“帝国CMS二级联动插件(ajax下拉...
总的来说，HTML二级联动下拉列表框的实现涉及HTML、JavaScript以及数据管理，通过监听用户交互，动态更新页面内容，为用户提供更便捷、个性化的操作体验。这种技术在网页表单、地图选择等场景中广泛使用。
总结起来，这个JavaScript实现的HTML Select二级联动实例主要展示了如何使用JavaScript动态更新下拉列表的内容，以响应用户在另一下拉列表中的选择。通过合理的数据结构和事件监听，可以创建出高效、可维护的联动...