6.2 实现两个select的同步

最新推荐文章于 2021-08-06 05:37:09 发布
最新推荐文章于 2021-08-06 05:37:09 发布
阅读量1k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： java xhtml
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>

    

<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”就可以自动设置第二个下拉列表框的选择项。
qf_hy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select联动
m0_51343111的博客
08-17 784
下拉框联动
超详细的HTML <select> 标签用法及技巧介绍
lucky123star的博客
07-31 5591
https://www.w3cschool.cn/htmltags/tag-select.html HTML 标签定义及使用说明 元素用来创建下拉列表。 元素中的  标签定义了列表中的可用选项。 select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提
html select 选择相同,Html select 批量选择
weixin_32009121的博客
06-03 461
function selectAll(box1,box2){var allBox = document.getElementsByName(box1);var id = document.getElementsByName(box2);for(var i=0;iif(id[i].checked!=allBox[0].checked){id[i].click();}}}全选不全选人文地理天文历史fu...
list.select
LCHUIHUI的博客
04-07 2239
using System.Linq; list.select的使用方法 List stulist = new List(); stulist.Add(new student(1)); stulist.Add(new student(2)); stulist.Add(new student(3)); List<int> newlist = stulist.Select(a => a.age).ToList(); foreach (var item in newlist)
elasticsearch and logstash版本6.2.4同步mysql
04-26
在现代大数据处理和分析中，Elasticsearch 和 Logstash 是两个非常重要的工具。Elasticsearch 是一个分布式、RESTful 风格的搜索和分析引擎，而 Logstash 是一个数据收集引擎，能够从各种不同来源获取数据，进行处理...
程序天下:JavaScript实例自学手册
07-08
6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
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[美] 著）
01-14
两卷本的《UNIX网络编程》是已故著名技术作家W. Richard Stevens的传世之作。卷2着重讨论如何让应用程序与在其他机器上的应用程序进行对话。良好的进程间通信（IPC）机制是提高UNIX程序性能的关键。本书全面深入地...
js 实现 实现两个select的同步
03-31
js 实现 实现两个select的同步! 值得下载看看!资源免费,大家分享!!
Vue项目中实现用户登录及token验证
热门推荐
sleepwalker_1992的专栏
10-08 8万+
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下： 1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码 2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token 3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面 4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转...
jQuery-常见的全选按钮和单选按钮同步
weixin_43862991的博客
06-27 494
下面是项目的结构代码，需要拷贝使用注意引入要 jquery <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>全选</title> <script src="./jquery-1.11.1.js"></script> <style> * { .
select2 ajax同步,javascript - select2 change ajax url - Stack Overflow
weixin_30200061的博客
08-06 137
Im working with knockout.js and select2 plugin.Im trying to change the select2 ajax url based on a value of an observable.for example if based on some selection i do ajax call to 1 url or another.Here...
单选按钮RadioButton及同时选择两个关联button的实现
wlking僚的博客
03-06 5055
#//Activity_Main.xml# <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:lay
html 两个 select,html 关于select 标签的两个问题
weixin_30863333的博客
06-18 340
1.两个select 标签 如何选中一个后 禁用第2个select标签且清空选中的值？2.后台如何获取 select 的val 和text？部分代码：1. ${pd.IDENTITY}(${pd.IDENTITY_TYPE_CODE})${uIdenList.IDENTITY})${pd.JYCD}(${pd.JYCD_CODE})${uJycdList.JYCD}(${uJycdL...
纯JS写的多select控件同步
总有一天，你的日积月累，会成为别人的望尘莫及
10-19 256
最近弄一功能，挺简单的，就是有多个select控件，内容相同，其中一个有变化时，其他的跟着变化。具体代码如下： &lt;body&gt; &lt;select id="select1" type="1" onchange="addSelectEvent('1')"&gt; &lt;option value="甲班"&gt;甲班&lt;/option&g
select-IO多路复用
peifeng
07-10 238
Select函数在Socket编程中还是比较重要的，可是对于初学Socket的人来说都不太爱用Select写程序，他们只是习惯写诸如connect、 accept、recv或recvfrom这样的阻塞程序（所谓阻塞方式block，顾名思义，就是进程或是线程执行到这些函数时必须等待某个事件的发生，如果事件没有发生，进程或线程就被阻塞，函数不能立即返回）。可是使用Select就可以完成非阻塞（所谓非阻塞方式non-block，就是进程或线程执行此函数时不必非要等待事件的发生，一旦执行肯定返回，以返回值的不同来反
javascript实现两个select选择框内容动态绑定
xuelangcxy的专栏
07-26 1万+
1. 有时候需要实现当用户选择一个选项之后，网页上另一部分的内容就随之变化，达到动态更新的目的，这时候我们就会想到ajax来实现局部刷新，接下来用一个简单的例子演示：总共有两个select选择框，第一个是省份的选择，第二个是对应省份的城市的选择，目标是实现当用户切换省份的时候，城市选择框中的选项全部替换为对应省份的城市： 对应的html代码，主体就是两个选择框 请选择省份
文字、图片同步下拉菜单数据
zhangankang的博客
04-02 312
文字、图片同步下拉菜单数据前提内容操作效果图 前提 自用的EIP软件，H5静态页面，网页运行后加载样式，JS函数部分需要调用驱动才能执行。（一般为了给元素初始值需要随网页加载运行JS，可有两种方法： 一、利用 $(function () {go_();})自动执行JS里的的go函数； 二、利用标签：，在页面加载或图片加载后立即执行go函数。） 内容 在已有数据库表前提下，通过页面添加下拉菜单元素、...
Ext js 6.2 怎么实现 tagfield 选中一个选项时将另外两个选项也选中
最新发布
06-11
在 Ext JS 6.2 中，可以通过监听 tagfield 的 select 事件来实现选中一个选项时将另外两个选项也选中的功能。具体实现步骤如下： 1. 在 tagfield 的配置中添加监听 select 事件的处理函数： ```javascript { xtype: 'tagfield', fieldLabel: '选项', displayField: 'name', valueField: 'id', store: optionStore, listeners: { select: 'onSelectOption' } } ``` 2. 在控制器中定义 onSelectOption 函数： ```javascript onSelectOption: function(tagfield, records) { var optionIds = records.map(function(record) { return record.get('id'); }); if (optionIds.indexOf(1) !== -1) { tagfield.setValue([1, 2, 3]); } else if (optionIds.indexOf(2) !== -1) { tagfield.setValue([2, 3, 4]); } else if (optionIds.indexOf(3) !== -1) { tagfield.setValue([3, 4, 5]); } } ``` 3. 在 onSelectOption 函数中根据选中的选项设置 tagfield 的值，使得另外两个选项也被选中。 以上代码仅供参考，具体实现还需要根据具体的业务需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值