`
qmug
  • 浏览: 198006 次
  • 性别: 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”就可以自动设置第二个下拉列表框的选择项。
分享到：
| 给下拉列表框数据分组
评论
发表评论

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

相关推荐

    《程序天下：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...

    《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程序性能的关键。本书全面深入地...

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

    疯狂JAVA讲义

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

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

    Java数据库编程宝典1

    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数据库编程宝典3

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

    sqlserver2000基础(高手也有用)

    14.3.5　在两个SQL Server数据库之间复制对象　451 第 15 章　SQL Server应用疑难解答　455 15.1　访问SQL Server实例的常见问题　455 15.1.1　连接失败　455 15.1.2　用户登录失败　458 15.1.3　测试连接到SQL ...

    UNIX环境高级编程_第2版.part1

    共两个压缩包( UNIX环境高级编程_第2版.part1 UNIX环境高级编程_第2版.part1 ) ------------------------------------------------------------ 原书名： Advanced Programming in the UNIX Environment 原出版社...

    UNIX环境高级编程_第2版.part2

    共两个压缩包( UNIX环境高级编程_第2版.part1 UNIX环境高级编程_第2版.part1 ) ------------------------------------------------------------ 原书名： Advanced Programming in the UNIX Environment 原出版社...

    C#编程经验技巧宝典

    98 &lt;br&gt;0153　如何自定义数字小数点左边分组位数　98 &lt;br&gt;0154　格式化输入数据为货币格式　99 &lt;br&gt;0155　如何计算两个整数的乘积　99 &lt;br&gt;0156　如何将二进制数转换为十进制数　100 &lt;br&gt;0157　如何...

    经典JAVA.EE企业应用实战.基于WEBLOGIC_JBOSS的JSF_EJB3_JPA整合开发.pdf

    6.1.3 JMS的两个重要版本 229 6.2 PTP类型的JMS 230 6.2.1 配置PTP的JMS服务器 231 6.2.2 PTP消息的发送 241 6.2.3 PTP消息的同步接收 244 6.2.4 PTP消息的异步接收 246 6.3 Pub-Sub类型的JMS 248 6.3.1 配置Pub-Sub...

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