`

JavaScript实现下拉列表的级联

阅读更多

<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>



[code]

分享到:
评论

相关推荐

    ajax实现下拉列表级联

    在下拉列表级联中,通常有一个主下拉列表,用户选择一个选项后,第二个相关的下拉列表会根据所选选项自动填充相关数据。例如,选择一个国家后,接着的城市下拉列表会显示相应国家的城市列表。这种级联效果可以通过...

    javaScript下拉列表级联更新

    在javaScript中使下拉列表实现级联更新

    ajax+struts2.0+jsp下拉列表级联

    在这个“ajax+struts2.0+jsp下拉列表级联”的示例中,我们将探讨如何利用这三个技术实现这种功能。 首先,AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页...

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

    级联下拉列表工具类,js实现

    ### 级联下拉列表工具类:JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式,特别是在处理多层级数据时,它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...

    动态实现下拉列表框三级级联查询

    在IT领域,动态实现下拉列表框的三级级联查询是一项常见的前端交互功能,它能够为用户提供更加便捷的导航和筛选体验。在这个场景中,我们使用JSP(JavaServer Pages)脚本语言来实现这一功能。JSP是Java平台上的...

    JavaScript解析XML实现多级级联下拉列表

    总结来说,实现JavaScript解析XML实现多级级联下拉列表的关键在于理解XML的结构、使用DOMParser解析XML,以及处理级联下拉列表的事件和逻辑。通过这些技术,我们可以创建出高效且易于维护的级联选择功能,提升用户的...

    JavaScript动态级联下拉列表框

    在实现JavaScript动态级联下拉列表框时,通常涉及以下几个关键知识点: 1. DOM操作:JavaScript通过Document Object Model(DOM)来操作HTML元素。要实现级联效果,我们需要获取或创建下拉列表(`&lt;select&gt;`元素),...

    jQuery实现的多级级联下拉列表

    **jQuery实现的多级级联下拉列表** 在网页开发中,级联下拉列表是一种常见的交互元素,它允许用户从一系列相关选项中选择,这些选项根据先前的选择动态更新。在本项目中,我们利用jQuery库来实现这种功能,同时结合...

    jQuery ajax JSON 下拉列表框级联

    在Web开发中,级联下拉列表是一种常见的交互设计,用户选择一个选项后,另一个相关的下拉列表会根据前者的选值动态更新。这个过程通常涉及到前端与后端的交互,利用JavaScript库如jQuery和服务器端框架如Spring MVC...

    jquery简单实现级联下拉列表

    本文将详细解析如何使用jQuery来实现级联下拉列表,这是一种常见的Web前端功能,常用于数据关联选择场景,如地区选择(省市区)、分类选择等。 ### 核心概念:级联下拉列表 级联下拉列表是指当用户在一个下拉列表...

    input 级联下拉列表

    以下是对`input`级联下拉列表的详细解释和实现方法。 1. **HTML基础知识**: `input`元素是HTML中的一种表单控件,用于接收用户输入。在创建级联下拉列表时,我们通常使用`&lt;select&gt;`标签来定义下拉列表,并通过`...

    javascript级联下拉列表和正则表达式

    javascript 级联下拉列表 正则表达式

    省市级联表格(不是下拉列表级联啊

    在这个场景中,"省市级联表格"并不是指传统的下拉列表级联,而是通过表格形式来展现省份和城市之间的层级结构。下面我们将深入探讨这个主题。 首先,我们要理解"非动态省市级联表单"的概念。这通常意味着表单中的...

    javascript实现省市地方级联实例

    总的来说,"javascript实现省市地方级联实例"是一个涉及前端JavaScript与后端C#协同工作的项目。前端利用JavaScript的DOM操作、事件监听、JSON解析等技术实现动态级联效果,后端通过C#和.NET平台提供数据支持。理解...

    网页表单级联下拉列表自动填写方法

    网页表单级联下拉列表自动填写方法是指在网页表单中,多个下拉列表框之间存在关联关系,选择前一个下拉列表框的选项后,后一个下拉列表框才会出现相关的选项,这样可以实现自动填写省、市、县三级下拉列表框的功能。...

    JavaScript级联下拉特效制作

    总的来说,制作JavaScript级联下拉特效是一个很好的实践项目,它涵盖了基本的JavaScript编程、DOM操作以及响应式设计的核心概念。通过这个过程,你可以提升你的JavaScript编程技巧,并为你的网页增添更丰富的交互性...

Global site tag (gtag.js) - Google Analytics