纯JS写的多select控件同步

最新推荐文章于 2020-11-23 22:48:05 发布
最新推荐文章于 2020-11-23 22:48:05 发布
阅读量256 收藏
点赞数
分类专栏： JS 文章标签： 多select控件 同步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjiaoling136/article/details/84745544
版权

最近弄一功能，挺简单的，就是有多个select控件，内容相同，其中一个有变化时，其他的跟着变化。具体代码如下：

<body>
	<select id="select1" type="1" οnchange="addSelectEvent('1')">
		<option value="甲班">甲班</option>
		<option value="乙班">乙班</option>
		<option value="丙班">丙班</option>
		<option value="丁班">丁班</option>
		<option value="戊班">戊班</option>
	</select>
	<br />
	<br />
	<select id="select2" type="2" οnchange="addSelectEvent('2')">
		<option value="甲班">甲班</option>
		<option value="乙班">乙班</option>
		<option value="丙班">丙班</option>
		<option value="丁班">丁班</option&
最低0.47元/天 解锁文章
wjiaoling136
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现 实现两个select的同步
03-31
js 实现 实现两个select的同步! 值得下载看看!资源免费,大家分享!!
同步页面上多个select的值
wyl232
06-27 160
同步页面上多个select的值 &lt;html&gt; &lt;script language="JavaScript" type="text/JavaScript"&gt; function synchronous(sr,des){ alert("dd"); des.selectedIndex =sr.selectedIndex; } &lt;/script&gt; &
原生javascript实现两个select联动和日期设置
qq_36482202的博客
11-23 398
<html> <head> <script type="text/javascript"> var regions = {} var tableHeader = ["name", "sex"] var tableData = [["lize", "male"], ["lixin", "female"]] function load() { regions = {"HONEKONG": ["a1", "a2"], "JAPAN": ["b1", "b2"]} ...
javascript实现两个select选择框内容动态绑定
Walker_m的博客
04-23 5312
1. 有时候需要实现当用户选择一个选项之后，网页上另一部分的内容就随之变化，达到动态更新的目的，这时候我们就会想到ajax来实现局部刷新，接下来用一个简单的例子演示：总共有两个select选择框，第一个是省份的选择，第二个是对应省份的城市的选择，目标是实现当用户切换省份的时候，城市选择框中的选项全部替换为对应省份的城市：对应的html代码，主体就是两个选择框[html] view plain co...
6.2 实现两个select的同步
古寒居
09-05 1021
6.2 实现两个select的同步 【实例描述】 当选中第一个下拉列表框的时候，第二个下拉列表框的值也随之改变，这被称为两个下拉列表框的同步。本例学习如何实现这种同步效果。 【实现代码】 [code="java"] 标题页 testA1 testA2 testA3 testA4 testA5 ...
SELECT控件 美化
02-03
在网页设计中，SELECT控件通常用于创建下拉列表，让用户在多个选项中进行选择。然而，原生的SELECT控件样式在不同浏览器之间存在差异，且样式控制能力有限，往往无法满足设计师对于美观和品牌一致性的要求。"SELECT...
jquery 自定义select控件
03-22
为了解决这个问题，开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件，以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件，并分析其核心原理。 一、为何需要...
Jquery双向select控件Bootstrap Dual Listbox
12-24
Bootstrap Dual Listbox是一款基于jQuery和Bootstrap框架的双选列表控件，它为用户提供了便捷的方式来在两个选择框之间同步选项的选取。这个控件尤其适用于需要处理大量可选项目的场景，用户可以轻松地进行批量选择...
自定义select下拉插件
08-09
然而，原始的HTML Select控件在样式定制和交互性方面往往存在局限。为了解决这些问题，开发者通常会创建自定义的select下拉插件。本文将深入探讨如何使用JavaScript来实现这样的功能，特别关注`mdropdown-master`这...
精美漂亮的实用div+css模仿select下拉框控件
03-01
2. **模仿Select控件** HTML的`<select>`元素是网页表单中的一种，通常用于提供一组选项让用户选择。但是，其默认样式在不同浏览器之间存在差异，且样式定制较为复杂。通过jQuery和CSS，我们可以自定义下拉框的外观...
js下用层来实现select的title提示属性
12-12
代码如下:[removed]              function opts(selectObj){                          var optDivs=document.createElement(“div”);                          var objTable=document.createElement(“table”);                          var objTbody=document.createElement(“tbody”);                          optDivs.styl
js控制select选中显示不同表单内容select下拉菜单特效
11-11
js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效
js获取多个select下拉框选中的值
qq_38410795冰淇淋的博客
03-27 4048
js获取多个select下拉框选中的值 var electronicIds = []; $("select[name='electronicId']").each(function(j,item){ electronicIds.push(document.getElementsByTagName("select")[j].value); }); 例子： var row= "<div cla...
用js实现两个select下拉框之间的元素互相移动
sweetllh的博客
04-25 1748
Javascript代码 <script type="text/javascript"> /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getEleme
Js 动态生成多个Select 标签 ， for循环动态给各自select 生成option
dd_Gao的博客
09-28 2510
var div= ""; for (var i = 0; i < timePeriodList.length; i++) { //时段Id var timeId = timePeriodList[i].substring(0, 1); //时段(17:00-18:00) var time = timePeriodList[i].substring(2,...
利用window.open实现post方式的传递参数
总有一天，你的日积月累，会成为别人的望尘莫及
10-27 8988
基本业务是这样子的：根据给定的用户名和密码，加密后生成二维码然后打印出来。看似简单的一句话，存在两个大问题： 1、打印功能时不能指定打印区域的，要打印只能打印整个页面，不可能只打印二维码所在的小片区域。那么只能重新开一个窗口，然后单独打印这一个窗口； 2、重新打开窗口时需要带参数，而且参数必须是隐藏的。window.open()默认带参数的方法是在url中直接添加参数，这样子参数信息就会暴...
select控件如何多项
最新发布
05-25
如果你是指 HTML 中的 select 控件，可以在 select 标签内使用多个 option 标签来实现多项选择。示例如下： ```html <select multiple> 选项1 选项2 选项3 </select> ``` 其中，`multiple` 属性表示可以多选，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值