<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=Generator CONTENT=EditPlus>
<META NAME=Author CONTENT=>
<META NAME=Keywords CONTENT=>
<META NAME=Description CONTENT=>
<style type=text/css>
body{font-family:Courier New, Courier}
select{font-size:8pt;font-family:Courier New, Courier}
input{font-size:8pt;font-family:Courier New, Courier}
</style>
<SCRIPT LANGUAGE=JavaScript>
<!--
var Name=new Array(3);
var Value=new Array(3);
Name[1]=new Array(Zosatapo1,Zosatapo2,Zosatapo3,Zosatapo4);
Name[2]=new Array(Reic Yang1,Reic Yang2,Reic Yang3,Reic Yang4);
function change()
{
selIndex=document.all(test).selectedIndex;
if(document.all(test).selectedIndex==0)
return;
for(i=document.all(test).options.length-1;i>-1;i--)
{
document.all(test).options.remove(i);
}
for(i=0;i<Name[selIndex].length;i++)
{
document.all(test).options.add(new Option(Name[selIndex][i],name+i));
}
}
function changeEx(){
for(i=document.all(sub).options.length;i>0;i--)
{
document.all(sub).options.remove(i-1);
}
if(document.all(main).selectedIndex==0){
document.all(sub).options.add(new Option(==========,-1));
return;}
selIndex=document.all(main).selectedIndex;
for(i=0;i<Name[selIndex].length;i++)
{
document.all(sub).options.add(new Option(Name[selIndex][i],name+i));
}
}
function reset(){
for(i=document.all(test).options.length-1;i>-1;i--)
{
document.all(test).options.remove(i);
}
document.all(test).options.add(new Option(==========,-1));
document.all(test).options.add(new Option(Zosatapo,1));
document.all(test).options.add(new Option(Reic Yang,2));
}
function display(object){
alert(object.options[object.selectedIndex].text+ +object.options[object.selectedIndex].value);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
First Sample:<br><font color=blue>All items will change After you Selected!</font><br>
<SELECT id=test onchange=change();>
<option value=-1 selected>==========
<option value=1>Zosatapo
<option value=2>Reic Yang
</SELECT><input name=Reset Select type=button value=Reset Select onclick=reset(); ><br><br>
Second Sample:<br><font color=blue>You selected Item in Main Select will change the Sub select Content!</font><br>
Main Select:<SELECT id=main onchange=changeEx();>
<option value=-1 selected>==========
<option value=1>Zosatapo
<option value=2>Reic Yang
</SELECT>
Sub Select:<SELECT id=sub onchange=display(this);>
<option value=-1 selected>==========
</SELECT><br><br>
</BODY>
</HTML>
分享到：
相关推荐
总结来说，"select级联下拉列表"是网页表单中一种常用的功能，通过JavaScript和HTML5的`<select>`元素实现，能够提供流畅的用户体验。在实际开发中，我们可以结合jQuery、Ajax以及各种UI库或插件，根据项目需求定制...
在网页开发中，"select级联"是一种常见的交互设计，主要用于实现下拉菜单之间的关联性。这种设计使得用户在一个下拉列表（select元素）中选择一个选项后，另一个相关的下拉列表的内容会根据前者的选中值动态更新。...
4. **初始化select2**：使用JavaScript（如jQuery或原生JS）来初始化select2，并设置初始数据和级联事件。 ```javascript $(document).ready(function() { var provinces = [/* 省市区数据 */]; // 初始化省份...
要实现级联效果，我们需要获取或创建下拉列表（`<select>`元素），添加或删除选项（`<option>`元素），以及监听用户的选中事件。例如，可以使用`document.getElementById()`或`document.querySelector()`找到目标...
在本案例中，我们将深入探讨如何使用JavaScript实现下拉框的级联操作。 首先，我们需要理解HTML结构。通常，两个级联的下拉框会分别定义为`<select>`元素，并通过`id`属性来唯一标识它们。例如： ```html <select ...
总的来说，"select级联二级菜单"涉及HTML结构的设计、JavaScript动态操作和可能的数据异步加载。通过学习提供的示例，你可以深入理解如何利用这些技术来创建交互式的多级选择菜单，这对于前端开发是非常实用的技能。...
以上就是使用Struts2实现select级联选择的基本流程。不连接数据库的情况，数据可以直接在Action中初始化。在实际项目中，数据通常从数据库中获取，因此级联Action需要根据用户选择的省份查询数据库并返回相应城市的...
JavaScript城市级联选择是一种常见的前端交互功能，常用于地址填写、区域选择等场景，它允许用户逐步选择国家、省份、城市等，形成一个完整的地区路径。这个功能的实现基于JavaScript的事件监听、DOM操作和数据处理...
在网页开发中，"select级联框"是一种常见的交互元素，它允许用户通过选择一个选项来触发下一级别的选项显示，通常用于实现区域选择、分类筛选等场景。本示例聚焦于利用JavaScript（jQuery框架）和JSON数据动态生成...
总的来说，制作JavaScript级联下拉特效是一个很好的实践项目，它涵盖了基本的JavaScript编程、DOM操作以及响应式设计的核心概念。通过这个过程，你可以提升你的JavaScript编程技巧，并为你的网页增添更丰富的交互性...
在城市级联中，我们需要获取或设置省份和城市下拉列表的值，这涉及到对`<select>`元素的选择和修改。例如，使用`document.getElementById()`或`querySelector()`方法获取元素，使用`innerHTML`或`options`属性设置...
下面将详细介绍两种常见的JavaScript实现级联效果的方法。 方法一：HTML与JavaScript内联事件 1. HTML结构：首先，我们需要创建一个包含多个`<select>`元素的结构，每个`<select>`代表一个级别的选项。 ```html ...
【JSP Ajax省市县Select级联菜单】是一个典型的前端与后端交互的示例，它在Web应用中常用于实现动态、无刷新的选择区域（省、市、县）功能。这个压缩包包含了一个完整的解决方案，使得用户在选择省份时，对应的市区...
在提供的压缩包"select_multiple三级分类级联"中，可能包含了HTML文件、CSS文件和JavaScript文件，分别负责结构、样式和交互逻辑。通过查看和分析这些文件，我们可以学习到如何实现这种复杂的交互效果，并可能找到一...
这是一个用JavaScript写的年，月，日的日期级联select。代码简单明了，易读易用。
在这个场景下，"级联插件"指的是用于实现多级选择效果的工具，常见于下拉选择框（Select）的交互设计中。这种插件能够帮助用户在多个关联的下拉菜单中进行逐级选择，如国家-省份-城市这样的层级关系，或者类别-子...
在JSON+Select级联应用中，通常会用到以下关键技术： 1. **JSON数据格式**：JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在级联下拉框中，JSON常用来存储级联关系的数据，如省市...
javascript 级联下拉列表 正则表达式
在网页开发中，Select级联是一种常见的交互设计，它指的是两个或多个下拉选择框（Select元素）之间存在依赖关系，当用户在一个下拉框中选择一个选项时，另一个下拉框的内容会根据所选选项自动更新。这种功能在很多...
### JSP+JavaScript 实现二级级联下拉菜单的知识点解析 #### 一、概述 在Web开发领域，实现动态的交互式用户界面是提升用户体验的重要手段之一。本文档将详细解析如何通过JSP（JavaServer Pages）与JavaScript来...