`
qmug
  • 浏览: 201513 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

6.2 实现两个select的同步

 
阅读更多
6.2  实现两个select的同步
【实例描述】

当选中第一个下拉列表框的时候，第二个下拉列表框的值也随之改变，这被称为两个下拉列表框的同步。本例学习如何实现这种同步效果。

【实现代码】 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>标题页</title>

</head>

<body>

<select onchange="selB.options[selectedIndex].selected=true">

<option>testA1</option>

<option>testA2</option>

<option>testA3</option>

<option>testA4</option>

<option>testA5</option>

</select>

&nbsp;&nbsp;&nbsp;&nbsp;

<select id="selB">

<option>testB1</option>

<option>testB2</option>

<option>testB3</option>

<option>testB4</option>

<option>testB5</option>

</select>

</body>

</html>

【运行效果】

选中第一个下拉列表框后的效果如图6-2所示。



图6-2  选中第一个下拉列表框后的效果

【难点剖析】

本例的技巧就是select标签的“selectedIndex”属性和“onchange”事件。当用户选择第一个下拉列表框后，第二个下拉列表框也要改变，所以要将此改变添加到第一个下拉列表框的“onchange”事件中。“selectedIndex”属性用来获取当前select标签的选项索引，当知道第一个下拉列表框的选项索引后，使用“options[selectedIndex].selected”就可以自动设置第二个下拉列表框的选择项。
分享到：
| 给下拉列表框数据分组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    elasticsearch and logstash版本6.2.4同步mysql

    在现代大数据处理和分析中，Elasticsearch 和 Logstash 是两个非常重要的工具。Elasticsearch 是一个分布式、RESTful 风格的搜索和分析引擎，而 Logstash 是一个数据收集引擎，能够从各种不同来源获取数据，进行处理...

    《程序天下：JavaScript实例自学手册》光盘源码

    6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...

    程序天下:JavaScript实例自学手册

    6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...

    20090612用友面试题

    ArrayList是非线程安全的，并且在内部实现时使用了一个数组来存储元素。 **Vector**：它也是Java集合框架的一部分，类似于ArrayList，但是Vector是线程安全的，这意味着它可以在多线程环境中安全地使用。Vector的...

    javascript代码常用大全

    - 实现两个或多个下拉框之间的联动效果。 #### 9. 文本排序 - 对文本数据进行排序。 #### 10. 画图类，含饼、柱、矢量贝滋曲线 - 使用 Canvas 或 SVG 实现图形绘制。 #### 11. 操纵客户端注册表类 - 在客户端...

    Git使用说明

    ### Git使用说明知识点详解 #### 一、安装Git **1.1 安装程序** ... 使用 `git diff &lt;commit-id&gt; &lt;commit-id&gt;` 比较两个提交之间的差异。 2. 使用 `git diff &lt;branch&gt; &lt;branch&gt;` 比较两个分支之间的差异。

    《UNIX网络编程 第2版. 第2卷， 进程间通信(中文版)》（W·Richard Stevens[美] 著）

    两卷本的《UNIX网络编程》是已故著名技术作家W. Richard Stevens的传世之作。卷2着重讨论如何让应用程序与在其他机器上的应用程序进行对话。良好的进程间通信（IPC）机制是提高UNIX程序性能的关键。本书全面深入地...

    Linux高性能服务器编程

    不仅理论全面、深入，抓住了重点和难点，还包含两个综合性案例，极具实战意义。《Linux高性能服务器编程》共17章，分为3个部分：第一部分对Linux服务器编程的核心基础——TCP/IP协议进行了深入的解读和阐述，包括TCP...

    UNIX网络编程 第2卷 进程间通信

    两卷本的《UNIX网络编程》是已故著名技术作家W. Richard Stevens的传世之作。卷2着重讨论如何让应用程序与在其他机器上的应用程序进行对话。良好的进程间通信（IPC）机制是提高UNIX程序性能的关键。本书全面深入地...

    Linux内核源代码情景分析 (上下册 高清非扫描 )

    - 管道是一种简单的IPC机制，用于在两个进程之间传递数据。 - `pipe`系统调用创建一个管道，并返回两个文件描述符。 - **6.3 命名管道** - 命名管道也称为FIFO，是一种持久化的管道，可以在没有关联的进程中使用...

    Access+2000中文版高级编程

    8.2.2 同一个表使用两次（自联接） 189 8.2.3 使用Access的自动查阅功能 191 8.3 运用操作查询：力量的源泉 193 8.3.1 生成表查询（SELECT INTO） 193 8.3.2 追加查询 194 8.3.3 更新查询（UPDATE..SET） ...

    Access 2000中文版高级编程(part1)

    8.2.2 同一个表使用两次（自联接） 189 8.2.3 使用Access的自动查阅功能 191 8.3 运用操作查询：力量的源泉 193 8.3.1 生成表查询（SELECT INTO） 193 8.3.2 追加查询 194 8.3.3 更新查询（UPDATE..SET） 195 ...

    ABAP面试大全

    - **2.3.3 HR模块知识：HR程序在开发中常用的两个逻辑数据库是什么？分别对其进行描述** - **PA03**: 用于员工主数据查询。 - **PA03D**: 用于部门数据查询。 - **2.3.4 HR模块知识：HR模块里面，如何修改HR的...

    疯狂JAVA讲义

    学生提问：使用组合关系来实现复用时，需要创建两个Animal对象，是不是意味着使用组合关系时系统开销更大？ 159 5.9 初始化块 159 5.9.1 使用初始化块 160 5.9.2 初始化块和构造器 161 5.9.3 静态初始化块 162 ...

    unix编程常见问题解答.pdf

    - 是的，可以在同一程序中同时使用这两种机制，但需要注意资源管理和同步问题。 **2.3 什么是读取目录的最好方法？** - 可以使用`opendir()`、`readdir()`和`closedir()`函数来遍历目录内容。这是Unix中最常用的...

    Java数据库编程宝典2

    6.2 UPDATE语句 6.2.1 在UPDATE中使用经计算的值 6.2.2 UPDATE的常见问题 6.3 带有提交和回滚的事务管理 6.4 DELETE语句 6.5 基于Swing的表编辑器 6.5.1 TableEditFrame 6.5.2 Controller类 6.6 JDBC ...

    Java数据库编程宝典4

    6.2 UPDATE语句 6.2.1 在UPDATE中使用经计算的值 6.2.2 UPDATE的常见问题 6.3 带有提交和回滚的事务管理 6.4 DELETE语句 6.5 基于Swing的表编辑器 6.5.1 TableEditFrame 6.5.2 Controller类 6.6 JDBC ...

Magicbox
Global site tag (gtag.js) - Google Analytics