下拉菜单级联(1)

最新推荐文章于 2025-08-21 23:22:44 发布
最新推荐文章于 2025-08-21 23:22:44 发布
阅读量527 收藏
点赞数
分类专栏： JAVASCRIPT - 技术文档 文章标签： function generator javascript input html button
本文介绍了一种使用HTML和JavaScript实现下拉菜单及级联菜单的方法。通过动态生成选项，用户可以在选择主菜单项后看到相应的子菜单内容变化。这种交互方式常见于网页表单中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

下拉菜单和级联菜单
<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>
 
javascript select级联
孤独剑的架构师之路
04-25 292
New Document body{font-family:Courier New, Courier} select{font-size:8pt;font-family:Courier New, Courier} input{font-size:8pt;font-family:Courier New, Courier} First...
最简单的html下拉菜单级联
qq_33768121的博客
05-23 4720
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>下拉框城市联动</title> <style> select {width: 200px; height: 30px;} &lt...
ajax的下拉菜单,下拉菜单的级联操作（ajax）
weixin_42489917的博客
08-05 869
在开发中常常会遇到菜单的级联操作，比如：国家、城市、乡镇的选择等。当选中某个国家的时候，后面的菜单会把该国家内的城市罗列出来，当选中城市的时候，后面的菜单会把对应的乡镇列出来。解决这种菜单的级联操作的办法，我理解的有两种：①使用js来实现，把页面所用到的级联数据放到js内，当页面加载完成后，通过js显示到对应的select内，这种方法的解决办法有很多种，最为直观的一种是放到多维数组中，每个人的思维...
jquery ajax决定下拉菜单，以及下拉菜单级联
许诗宇的博客
08-14 755
目录 html js 后台java html <select class="form-control" id="father" name="father" style="width:130px"> <option value="-1">全部</option> </select> <select cl...
html5级联菜单,h5级联下拉、分类筛选
weixin_30711615的博客
06-16 1822
级联下拉列表框这种常见的需求，相信大家都经常遇到，下面两种写法都曾运用在项目，测试是没问题，但代码可能不是最好的，亲如果有更好的建议，请留言给我哦～一起探讨注：数据若为 省市 数据，可利用省市联动的特殊性(如省市县的国标编码，按每2位直接切断判断)，但这里不做讨论，亲们有兴趣可以查阅相关资料第一种：强调复用性采用jQuery利用class作为识别符，将级联下拉列表框选出来。当选项发生变化的时候，调...
java swing 级联菜单_java swing 下拉列表级联
weixin_28949355的博客
02-25 417
现在第一个下拉列表只有一个选项其它选项看不到，求高手帮忙修改一下，第一个下拉列表选了XX系后，第二个下拉列表自动变成XX系的专业，第三个下拉列表是专业的班privatevoidinitialDa...现在第一个下拉列表只有一个选项其它选项看不到，求高手帮忙修改一下，第一个下拉列表选了XX系后，第二个下拉列表自动变成XX系的专业，第三个下拉列表是专业的班private void initialDat...
php ajax二级联下拉菜单,ajax的下拉菜单级联操作
weixin_42350951的博客
03-12 179
这次给大家带来ajax的下拉菜单级联操作，ajax下拉菜单级联操作的注意事项有哪些，下面就是实战案例，一起来看一下。在开发中常常会遇到菜单的级联操作，比如：国家、城市、乡镇的选择等。当选中某个国家的时候，后面的菜单会把该国家内的城市罗列出来，当选中城市的时候，后面的菜单会把对应的乡镇列出来。解决这种菜单的级联操作的办法，我理解的有两种：①使用js来实现，把页面所用到的级联数据放到js内，当页面加载...
java swing 级联菜单,java swing 下拉列表级联
weixin_36073959的博客
03-20 588
现在第一个下拉列表只有一个选项，其它的选项看不到，求高手帮忙修改一下，第一个下拉列表选了xx系后第二个自动变成xx系的几个专业，第三个是专业的几个班求高手啊，只有这么多分了private void initialData() {try {this.initialConnection();// 初始化数据库连接// 查询数据库获得当前用户所属学院的名称String sql1 = "select co...
Excel：创建级联下拉菜单
qq_41176800的博客
04-06 4622
本文介绍如何在 Excel 中创建两级关联下拉菜单的方法。最终效果动图展示◆◆◆一般步骤及说明1、首先输入数据。2、选中 B4 单元格，点击“数据选项卡/数据工具/数据验证”，如下...
android实现级联菜单,android 之Spinner下拉菜单实现级联
weixin_39677870的博客
05-26 314
import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Ada...
Bootstrap每天必学之级联下拉菜单
09-02
1. 使用Bootstrap的`<select>`元素和`dropdown-menu`类创建基本的下拉菜单。 2. 添加自定义属性，如`ref`和`refUrl`，用于关联子级菜单和定义数据源。 3. 编写JavaScript组件，监听父级菜单的`change`事件，使用Ajax...
android 之Spinner下拉菜单实现级联
09-05
在Android开发中，Spinner是一个常用的组件，用于展示一个下拉列表供用户选择。它通常用于在有限的选项中进行选择，比如设置、...通过以上步骤，你可以创建出灵活且动态的级联下拉菜单，提供用户更加丰富的交互体验。
下拉菜单的级联操作（ajax）
10-21
下拉菜单的级联操作是网页设计中常见的交互形式，主要应用于地理位置选择、分类选择等场景。级联操作通常包含两个或两个以上的下拉菜单（select），其中上一级的选择会决定下一级菜单中的选项。比如，在选择国家时，...
JavaScript基础语法five
最新发布
2301_79744908的博客
08-21 247
本文介绍了JavaScript中对象的基本概念和使用方法。对象是一种无序的数据集合，由属性和方法组成，可以通过点语法或方括号访问属性。文章详细讲解了对象的增删改查操作、方法的定义与调用，以及使用for-in遍历对象的技巧。同时介绍了Math内置对象及其常用方法（如ceil、floor、round等），包括随机数生成公式和猜数字案例的实现。最后指出null属于object类型，并提供了生成N-M范围随机数的通用公式。
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法
张先森的博客
08-19 351
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。
从入门到精通：Java设计模式——单例模式
m0_73590302的博客
08-21 647
本文先解析单例模式 “确保类仅一个实例、提供全局访问点” 的定义，及唯一性、自我实例化、全局访问三大特点，说明其节省资源、保数据一致性的作用。接着详解饿汉式、懒汉式（含线程安全与不安全）、双重检查锁、静态内部类、枚举 6 种实现方式，分析各方式代码、原理、优缺点，尤其聚焦懒汉式多线程安全问题与双重检查锁中 volatile 的作用。还介绍单例在日志记录器、配置管理器等场景的应用，对比优缺点，关联 Spring 框架中 Bean 的单例管理，最后总结要点并给出设计模式学习建议。
Layui COP证书管理系统
bemyrunningdog
08-18 442
本文介绍了一个基于Layui和SpringBoot的COP证书管理系统的完整实现方案。系统采用前后端分离架构，前端使用Layui2.8.3框架实现响应式界面，后端基于SpringBoot3.1.0和Java17开发，MySQL8.0作为数据库存储。系统实现了证书全生命周期管理（草稿、已提交、审核中、已签发、已拒绝五种状态），包含证书增删改查、批量操作、操作日志记录等核心功能。技术实现上，后端采用RESTful API设计，通过MyBatis操作数据库，前端使用Layui表格和表单组件实现数据展示和交互。系统
学习链接。
weixin_49035434的博客
08-18 507
hello 算法 0.2 如何使用本书 - Hello 算法代码随想录: 代码随想录被删的前端游乐场 被删的前端游乐场Github漫游指南 : Github ebookJaveScript源码: https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js世峰的刷题网站: labuladong 的算法笔记 | labuladong 的算法笔记编程导航: 编程导航 - 程序员一站式编程学习交流社
【tips】unsafe-eval线上页面突然空白
Dorcas_FE的博客
08-18 256
页面因违反CSP策略的unsafe-eval限制而无法展示，原因是后端安全升级后原CSP策略仅允许script-src 'self' 'unsafe-inline'，
JavaScript下拉菜单级联实现详解
从提供的文件信息中可以提取出一个具体的IT知识点，那就是“JavaScript下拉级联实现”。下面将详细介绍这个知识点的内容。 ### 知识点：JavaScript下拉级联实现 #### 概念 JavaScript下拉级联通常是指在网页中使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值