`
紫风哥哥
  • 浏览: 50822 次
  • 性别: 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();
});

分享到:
评论

相关推荐

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

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

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

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

    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的省市联动关联表单.zip

    jQuery的省市联动关联表单&lt;/title&gt; &lt;link href="css/layout.css?3.1.64" rel="stylesheet" type="text/css" /&gt; [removed][removed] &lt;/head&gt; &lt;body&gt;[removed][removed] &lt;!--...

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

    用div全模拟select的全效果。 该效果运用jquery实现。 个浏览器兼容。 能像原始的select一半随内容的增加而增加。

    jQuery点击页面其他部分隐藏下拉菜单功能

     web页面中,我们一般不用select、option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,...

    [原创]基于JQUERY的Combo下拉框控件

    控件中含有隐藏的SELECT表单控件,ID及NAME都可自定义,这样可使COMBO控件放在一个普通的表单内,用户用一般的提交方式, 也可把选中的值准确地传到后台 经测试,兼容IE6--IE8,Firefox,chrome浏览器,在非IE浏览...

    jQuery详细教程

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 亲自试一试 ...

    jQuery核心语法

    jQuery核心语法 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、...

    jquery-1.1.3 效率提高800%

    Safari 2 3575ms 475ms 753% Opera 9.1 3196ms 326ms 980% Average improvement: 867% &lt;br&gt;下表为jQuery1.1.3与常用的一些JS库选择器的对比: Browser Prototype jQuery Mootools Ext Dojo ...

    jQuery完全实例.rar

    jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...

    Jquery 表单取值赋值的一些基本操作

    具有限定子节点选择器:$(“mix1[mix2]”):返回包含mix2的mix1节点.如:$(“div[a]”):包含a标签的div. 这个和$(“div a”)不相同.后者表示div中的a标签,返回的是a标签对象,前者返回的是div标签对象 冒号限定结点选择...

    JQuery选择器

    JQuery选择器 几个小练习 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; ; charset=utf-8" /&gt; &lt;title&gt;2-12 &lt;!-- 引入jQuery -...

    利用JS轻松实现获取表单数据

    接触过Angularjs的都知道,ng支持双向绑定,我们可以轻轻松松的通过ngModel将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了。那对于我们开发前台网站,不用ng一类的MVVM...

    获得所有表单值的JQuery实现代码[IE暂不支持]

    IE 暂不支持CSS: 代码如下:&lt;style&gt; body{ margin:0; padding:0; } div{ margin:0; padding:0; } .container{ margin-left:10%; margin-right:10%; } ul li{ list-style:none; } u

    Web前端高级作业一.txt

    2.4DIV+CSS组合选择器 注意box-sizing 三.JavaScript 用&lt;script&gt;&lt;/script&gt;标签包围,这里面的代码如同java里面的代码一样有操作性 这里面的数据是弱数据类型 有顺序结构、循环结构、条件结构 还可以写函数,外...

    jQuery结合CSS制作漂亮的select下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息。今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮...

    layui 根据后台数据动态创建下拉框并同时默认选中的实例

    第一步 form表单里写好一个下拉框 &lt;div class=layui-form-item&gt; 下拉选择框 &lt;div class=layui-input-block&gt; &lt;select id=selectId name=interest lay-filter=city&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; 第二...

Global site tag (gtag.js) - Google Analytics