最近弄一功能，挺简单的，就是有多个select控件，内容相同，其中一个有变化时，其他的跟着变化。具体代码如下：
<body>
<select id="select1" type="1" onchange="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" onchange="addSelectEvent('2')">
<option value="甲班">甲班</option>
<option value="乙班">乙班</option>
<option value="丙班">丙班</option>
<option value="丁班">丁班</option>
<option value="戊班">戊班</option>
</select>
<br />
<br />
<select id="select3" type="3" onchange="addSelectEvent('3')">
<option value="甲班">甲班</option>
<option value="乙班">乙班</option>
<option value="丙班">丙班</option>
<option value="丁班">丁班</option>
<option value="戊班">戊班</option>
</select>
</body>
<script type="text/javascript">
function addSelectEvent(id){
var select = document.getElementById("select"+id);
var type = select.getAttribute("type");//获取属性
alert(select.value+"\t"+type);
var otherTypes = "";
var selects = document.getElementsByTagName("select");
var otherSelect = null;
for(var i=0;i<selects.length;i++){
otherSelect = selects[i];
otherTypes = otherSelect.getAttribute("type");
if(type==otherTypes){//说明当前循环的select就是目前点击的select
continue;//跳出当前循环，继续下一个循环
}else{
jsSelectItemByValue(otherSelect,select.value);//循环其option并设定
}
}
}
//添加选中值
function jsSelectItemByValue(objSelect,objItemText){
for(var i=0;i<objSelect.options.length;i++) {
if(objSelect.options[i].value == objItemText) {
objSelect.options[i].selected = true;
break;
}
}
}
</script>
相关推荐
在网页设计中，SELECT控件通常用于创建下拉列表，让用户在多个选项中进行选择。然而，原生的SELECT控件样式在不同浏览器之间存在差异，且样式控制能力有限，往往无法满足设计师对于美观和品牌一致性的要求。"SELECT...
为了解决这个问题，开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件，以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件，并分析其核心原理。 一、为何需要...
2. **模仿Select控件** HTML的`<select>`元素是网页表单中的一种，通常用于提供一组选项让用户选择。但是，其默认样式在不同浏览器之间存在差异，且样式定制较为复杂。通过jQuery和CSS，我们可以自定义下拉框的外观...
Bootstrap Dual Listbox是一款基于jQuery和Bootstrap框架的双选列表控件，它为用户提供了便捷的方式来在两个选择框之间同步选项的选取。这个控件尤其适用于需要处理大量可选项目的场景，用户可以轻松地进行批量选择...
JavaScript日期时间选择控件的实现有多种库和框架可供选择，如jQuery UI的Datepicker、Bootstrap的DateTimePicker、Pickadate.js和Flatpickr等。这些库通常提供丰富的API和配置选项，方便开发者根据需求进行定制。 ...
3. **事件绑定**：使用JavaScript监听用户的点击、键盘操作等事件，当用户进行选择时，更新模拟组件的状态，并同步原生Select的选中值。 4. **交互逻辑**：编写JavaScript代码来处理打开/关闭下拉列表、焦点切换、...
这种组件结合了传统`<select>`控件的选择功能和`<input>`控件的自由文本输入能力，从而提供更加灵活和强大的用户交互体验。 #### 二、基本概念 在标准HTML中，`<select>`元素用于创建一个下拉列表或选择框。用户...
这个控件可能包括了日历视图，滑动选择日期、时间的功能，以及与服务器同步等高级特性。 总结一下，JavaScript时间控件的创建涉及对Date对象的理解，HTML和CSS的布局设计，以及JavaScript事件处理和DOM操作。通过...
如果项目已经使用了jQuery，可以考虑使用现有的插件，如`multiselect.js`或`select2`，它们提供了预封装的多选下拉框解决方案。 以上就是关于“html多选下拉框，CheckBox的Select组件”的详细解释。通过这种方式，...
例如，我们可以创建一个`<div>`作为容器，里面包含一个隐藏的`<select>`和一组`<a>`标签，通过JavaScript监听`<a>`的点击事件，更新`<select>`的值，并触发其change事件，这样就能保持数据的同步。同时，我们可以...
在ASP.NET开发中，TreeView控件经常用于展示层次结构的数据，比如目录结构、...总之，利用JQuery实现TreeView控件的全选和全不选功能，主要涉及到DOM遍历、事件处理和状态同步，理解这些概念对于优化用户体验至关重要。
然而，原始的HTML Select控件在样式定制和交互性方面往往存在局限。为了解决这些问题，开发者通常会创建自定义的select下拉插件。本文将深入探讨如何使用JavaScript来实现这样的功能，特别关注`mdropdown-master`这...
3. 可能还有JavaScript文件：因为纯CSS可能无法完全控制`<select>`的所有行为，比如打开下拉选项时的动画效果，这时候可能需要JavaScript来辅助实现。 CSS中的关键知识点可能包括： - `appearance: none;`：这可以...
在了解如何使用JavaScript动态控制服务器端控件之前，我们首先要了解什么是服务器端控件以及它们是如何在**...通过上述方法，可以有效地解决由JavaScript操作控件导致的状态同步问题，并确保应用程序的前后端协同工作。
通过ADO.NET库，我们可以连接到Access数据库，执行插入、更新和删除操作，与树形控件同步数据。 在获取树所有节点的值时，通常我们需要遍历整个树结构。这可以通过递归方法实现，从根节点开始，逐层访问每个节点，...
当用户选择或取消选择时，你需要更新这个数组，并同步到父组件。 6. **事件传播**：为了让父组件知道当前选中的值，你需要在`SelectTree`组件中触发自定义事件，如`on-change`，并将选中的值作为参数传递。 7. **...
日期时间控件通常会触发一系列事件，如`select`、`change`等，开发者可以通过监听这些事件来执行相应的业务逻辑。同时，还需要了解如何设置验证规则，确保用户输入的有效性。 7. **响应式设计**： 现代Web应用...
2. 初始化控件：在JavaScript中，调用库提供的函数创建地区选择控件，可能需要指定一个DOM元素（如`<select>`标签）作为容器。 3. 绑定事件：设置事件监听器，当用户选择新的省份或城市时，更新显示的选项，可能还...
例如，我们可以将`<select>`和`<input>`组合成一个看起来像单个控件的元素： ```css .custom-select { display: inline-block; position: relative; } .custom-select select { display: none; /* 隐藏默认的...
在WebBrowser控件中进行服务器交互时，有时需要等待页面完全加载或者JavaScript执行完毕。可以使用定时器或`DocumentCompleted`事件来实现延迟等待。在处理完`DocumentCompleted`事件后再执行后续操作，可以确保...