`
紫风哥哥
  • 浏览: 52309 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Jquery实现select表单里选择不同的值一些隐藏的div显示出来

 
阅读更多
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();
});

分享到:
评论

相关推荐

    select实现div图层切换效果(jquery实现)

    本示例就是利用jQuery库来实现这样的功能,使得用户在select中选择不同的选项时,对应的div图层能够无缝切换,提供丰富的用户体验。以下是关于这个主题的详细知识讲解。 首先,`select`是HTML中的一个表单元素,...

    jquery div模拟select表单地区选择三级联动美化效果

    这通常需要监听第一个下拉菜单的改变事件,并根据其值动态加载并显示第二个菜单,同理,再根据第二个菜单的选择加载第三个菜单。 四、美化效果 jQuery提供了丰富的动画效果,如淡入淡出(`fadeIn/fadeOut`)、滑动(`...

    div模拟下拉菜单(select)jquery插件.gz

    在网页设计中,下拉菜单通常用于提供用户多个选择项,比如在表单中选择一个城市或国家。传统的HTML `&lt;select&gt;` 元素虽然简单易用,但其样式定制性有限,不能很好地适应现代网页的视觉需求。为了解决这个问题,开发者...

    jQuery实现提交表单时不提交隐藏div中input的方法

    在本例中,我们探讨的是如何使用jQuery来实现一个特定的功能:在提交表单时,不包括隐藏div中的input元素的值。这是因为通常情况下,表单在提交时会包含所有可见或不可见的input元素的值,而我们有时希望隐藏部分...

    jquery+css+div实现select选择框样式

    此form select下拉控件是使用div+jq+css实现,其表单功能正常使用,能正常传值。根据需要修改css背景、css宽度、css高度等图片或css样式实现自己想要的select下拉菜单表单美化效果。演示地址:...

    jquery监听div内容的变化具体实现思路

    change事件是jQuery中用于监听表单元素值变化的事件,它仅适用于文本域(textfield)、文本区(textarea)和选择框(select)等表单元素。当这些元素的值发生变化时,就会触发change事件。对于div来说,由于它不是...

    DIV+CSS+JS仿Select下拉表单

    【标题】"DIV+CSS+JS仿Select下拉表单"是前端开发中常见的一个技术实践,它旨在通过HTML的`&lt;div&gt;`元素、CSS样式和JavaScript脚本,实现一个功能与原生`&lt;select&gt;`标签类似的下拉选择器。这种自定义下拉表单在界面设计...

    jquery 自定义select控件

    为了解决这个问题,开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件,以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件,并分析其核心原理。 一、为何需要...

    jQuery实现select下拉框菜单选中插件.zip

    4. CSS自定义:由于原始的`&lt;select&gt;`元素样式难以调整,插件可能通过创建额外的DOM结构(如使用`&lt;div&gt;`模拟下拉框)并应用CSS样式来实现美化。理解CSS盒模型、选择器优先级和响应式设计原则,可以帮助你根据需求调整...

    简单jQuery商品属性选择表单

    1. **HTML结构**:一个基本的商品属性选择表单通常包括多个选择框(checkboxes)或下拉菜单(select options),用于表示不同的属性选项。例如,颜色、尺寸、材质等。我们需要为每个选项添加适当的ID和class,以便于...

    jquery模拟select,带tip提示

    4. **选中状态**:点击选项后更新选中项的样式,并同步到隐藏的原生`&lt;select&gt;`元素中,以保持表单提交的兼容性。 二、集成qTip提示 qTip是一个强大的jQuery插件,用于创建各种类型的提示效果。在这个例子中,它被...

    div+css模拟select

    3. **跨浏览器兼容**:原生`&lt;select&gt;`在不同浏览器间表现不一致,使用div+css模拟可确保一致的显示效果。 4. **更好的可访问性**:通过优化HTML结构,可以更好地支持屏幕阅读器和其他辅助技术。 二、div+css模拟...

    jquery自定义select下拉样式.zip

    5. **同步状态**:确保用户在自定义列表中选择的项与隐藏的原生Select保持同步,以便在表单提交时能正常工作。 在这个"jiaoben18790"文件中,可能包含了实现以上步骤的示例代码,包括HTML结构、CSS样式以及jQuery...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向...

    jquery用ul模拟表单select列表/菜单效果

    工作中用select总是遇到很多问题,例如经常出现select无法被div等元素遮盖,我想用其他元素模拟select可能会更好,最近刚学jquery,于是就写了个效果来模拟,顺便练习下,代码很冗长,希望大家多拍砖。

    用div+jq高仿ie6的select表单随内容增加-2012-11-1

    用div+jq高仿ie6的select表单随内容增加 进行了一个升级,将其做成一个类似插件的形式; 在html中,依旧是应用传统的select进行布局,只需要给select一个class为toDiv,就可以动态的将select替换为已经设置好了的div...

    JQuery 动态生成DIV、Table并处理数据

    - 动态表单:根据用户的选择或操作动态生成或隐藏表单字段。 - 数据可视化:创建图表或图形,根据用户交互更新显示。 综上所述,掌握JQuery动态生成HTML元素和处理数据的能力是Web开发者必备的技能之一。通过理解...

    jQuery实现的浮动层div浏览器居中显示效果

    在网页开发中,经常需要实现一些层(Div)在浏览器中居中显示的效果,这种效果在弹窗对话框或提示信息中尤为常见。要实现这样的效果,我们可以通过使用jQuery这个快速、小巧且功能丰富的JavaScript库来完成。本篇...

    div模拟select

    此外,一些库和框架,如jQuery UI、Bootstrap、Vue.js等,提供了封装好的组件,可以帮助开发者更方便地实现这样的效果。 在`test1.jsp`这个文件中,可能是博主提供了一个示例代码,演示如何在JavaServer Pages (JSP...

    jQuery实现表单下拉菜单选中美化特效源码.zip

    在本文中,我们将深入探讨如何使用jQuery库来实现表单下拉菜单的美化特效。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作等任务,使得前端开发更加高效。针对标题和描述中提到的"jQuery...

Global site tag (gtag.js) - Google Analytics