select默认值:-- 其他值:java c net
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
选择java时显示d3 选择net时显示d1
<select id="s">
<option value="">--</option>
<option value="java">java</option>
<option value="c">c</option>
<option value="net">net</option>
</select>
<div id="d1" style="display:none;"></div>
<div id="d2" style="display:none;"></div>
<div id="d3" style="display:none;"></div>
var map = {"java":"d1", "c":"d2", "net":"d3"};
$("#s").bind("change", function(){
var divId = map[this.value];
$("#"+divId).show().siblings().hide();
});
分享到:
相关推荐
本示例就是利用jQuery库来实现这样的功能,使得用户在select中选择不同的选项时,对应的div图层能够无缝切换,提供丰富的用户体验。以下是关于这个主题的详细知识讲解。 首先,`select`是HTML中的一个表单元素,...
这通常需要监听第一个下拉菜单的改变事件,并根据其值动态加载并显示第二个菜单,同理,再根据第二个菜单的选择加载第三个菜单。 四、美化效果 jQuery提供了丰富的动画效果,如淡入淡出(`fadeIn/fadeOut`)、滑动(`...
在网页设计中,下拉菜单通常用于提供用户多个选择项,比如在表单中选择一个城市或国家。传统的HTML `<select>` 元素虽然简单易用,但其样式定制性有限,不能很好地适应现代网页的视觉需求。为了解决这个问题,开发者...
在本例中,我们探讨的是如何使用jQuery来实现一个特定的功能:在提交表单时,不包括隐藏div中的input元素的值。这是因为通常情况下,表单在提交时会包含所有可见或不可见的input元素的值,而我们有时希望隐藏部分...
此form select下拉控件是使用div+jq+css实现,其表单功能正常使用,能正常传值。根据需要修改css背景、css宽度、css高度等图片或css样式实现自己想要的select下拉菜单表单美化效果。演示地址:...
change事件是jQuery中用于监听表单元素值变化的事件,它仅适用于文本域(textfield)、文本区(textarea)和选择框(select)等表单元素。当这些元素的值发生变化时,就会触发change事件。对于div来说,由于它不是...
【标题】"DIV+CSS+JS仿Select下拉表单"是前端开发中常见的一个技术实践,它旨在通过HTML的`<div>`元素、CSS样式和JavaScript脚本,实现一个功能与原生`<select>`标签类似的下拉选择器。这种自定义下拉表单在界面设计...
为了解决这个问题,开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件,以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件,并分析其核心原理。 一、为何需要...
4. CSS自定义:由于原始的`<select>`元素样式难以调整,插件可能通过创建额外的DOM结构(如使用`<div>`模拟下拉框)并应用CSS样式来实现美化。理解CSS盒模型、选择器优先级和响应式设计原则,可以帮助你根据需求调整...
1. **HTML结构**:一个基本的商品属性选择表单通常包括多个选择框(checkboxes)或下拉菜单(select options),用于表示不同的属性选项。例如,颜色、尺寸、材质等。我们需要为每个选项添加适当的ID和class,以便于...
4. **选中状态**:点击选项后更新选中项的样式,并同步到隐藏的原生`<select>`元素中,以保持表单提交的兼容性。 二、集成qTip提示 qTip是一个强大的jQuery插件,用于创建各种类型的提示效果。在这个例子中,它被...
3. **跨浏览器兼容**:原生`<select>`在不同浏览器间表现不一致,使用div+css模拟可确保一致的显示效果。 4. **更好的可访问性**:通过优化HTML结构,可以更好地支持屏幕阅读器和其他辅助技术。 二、div+css模拟...
5. **同步状态**:确保用户在自定义列表中选择的项与隐藏的原生Select保持同步,以便在表单提交时能正常工作。 在这个"jiaoben18790"文件中,可能包含了实现以上步骤的示例代码,包括HTML结构、CSS样式以及jQuery...
一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向...
工作中用select总是遇到很多问题,例如经常出现select无法被div等元素遮盖,我想用其他元素模拟select可能会更好,最近刚学jquery,于是就写了个效果来模拟,顺便练习下,代码很冗长,希望大家多拍砖。
用div+jq高仿ie6的select表单随内容增加 进行了一个升级,将其做成一个类似插件的形式; 在html中,依旧是应用传统的select进行布局,只需要给select一个class为toDiv,就可以动态的将select替换为已经设置好了的div...
- 动态表单:根据用户的选择或操作动态生成或隐藏表单字段。 - 数据可视化:创建图表或图形,根据用户交互更新显示。 综上所述,掌握JQuery动态生成HTML元素和处理数据的能力是Web开发者必备的技能之一。通过理解...
在网页开发中,经常需要实现一些层(Div)在浏览器中居中显示的效果,这种效果在弹窗对话框或提示信息中尤为常见。要实现这样的效果,我们可以通过使用jQuery这个快速、小巧且功能丰富的JavaScript库来完成。本篇...
此外,一些库和框架,如jQuery UI、Bootstrap、Vue.js等,提供了封装好的组件,可以帮助开发者更方便地实现这样的效果。 在`test1.jsp`这个文件中,可能是博主提供了一个示例代码,演示如何在JavaServer Pages (JSP...
在本文中,我们将深入探讨如何使用jQuery库来实现表单下拉菜单的美化特效。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作等任务,使得前端开发更加高效。针对标题和描述中提到的"jQuery...