用JQuery实现选中select里面的option显示对应的div

HTML:

<select name=""  onchange="select(this)">
  <option value="1">题目一</option>
  <option value="2">题目二</option>
  <option value="3">题目三</option>
  <option value="4">题目四</option>
</select>

<div>

  <div  id="div1">内容一

  </div>

  <div id="div2" style="display:none">内容二

  </div>

  <div id="div3" style="display:none">内容三

  </div>

  <div id="div4" style="display:none">内容四

  </div>

</div>

//我试过,内容标签只能用id,不能用class.

//而且js的文件名不能为select。

JS:

function select(obj){
$("#div" + obj.value).show().siblings().hide();

//找到内容的标签 + 点击select获得的value值,让它显示,再让他的兄弟标签隐藏。
}

5.用JQuery实现选中select里面的option显示对应的div的更多相关文章

  1. 用JQuery实现选中select里面的option显示对应的div

    HTML: <select name=""  onchange="select(this)"> <option value="1&q ...

  2. legend---七、jquery如何选中select的selected的选择上的自定义属性

    legend---七.jquery如何选中select的selected的选择上的自定义属性 一.总结 一句话总结:用冒号属性选择器 var type=$(this).children('option ...

  3. js和Jquery获取选中select值和文本

    <body> <select name="PaymentType" style="width:110px" > <option v ...

  4. jquery获取选中select的文本,值等

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  5. jQuery操作选中select下拉框的值

    js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 ...

  6. 【JSP EL】使用EL表达式比较 动态选中 select中的option

    <option value="${k.key }" ${KPIThis.parent.parent.thisId == k.key ? "selected" ...

  7. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

  8. 根据select中选定option触发不同事件

    做公司项目,要实现一个小需求,根据下拉框选定的数据,绑定不同的事件.我的思路是获取select下面的option值,然后给它们定义不同的点击事件,但是在使用中option不能添加类,同时没有click ...

  9. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

随机推荐

  1. [No000012A]WPF(2/7):布局,容器和布局转换[译]

    概要 在上一篇文章中,我讨论了一些WPF应用的基础知识,它们是使用WPF的基本架构和内部结构.在本文中,我将讨论编写你的第一个WPF程序的基本的东西和怎么在你的窗口中布局控件.这是每一个想使用WPF的 ...

  2. [No0000D6]端口-进程查询.bat

    @echo off color a Title XP端口-进程查询 setlocal enabledelayedexpansion echo ╔- -╗ echo 本机开放的端口及使用该端口的进程 e ...

  3. hive优化之调整mapreduce数目

    一.调整hive作业中的map数 1.通常情况下,作业会通过input的目录产生一个或者多个map任务.主要的决定因素有: input的文件总个数,input的文件大小,集群设置的文件块大小(目前为1 ...

  4. ionic中数据进行操作后,需要直接显示改变后的数据,数据刷新

    数据分页是通过使用下拉加载,查询sqlite本地数据的数据 <ion-refresher (ionRefresh)="doTest($event)"> <ion- ...

  5. Android Studio自动排版的两种方法

    Android Studio这样的集成开发环境虽然代码自动化程度很高,但是自动化程度高导致人的自主性就下降了,而且总是依赖编辑器的功能也会搞得代码排版很别扭. 最难受的是你在Android Studi ...

  6. js return false\e.preventDefault() 以及session

    @{ ViewBag.Title = "Test"; } <h2>Test</h2> 区别的介绍 <br/> 我们在平时的编码中javascri ...

  7. [skill][debug][gdb] 使用core dump 进行GDB

    core dump 扫盲:https://wiki.archlinux.org/index.php/Core_dump 1.  人为制作 core dump 1.1  实时在线生成core dump. ...

  8. OpenGL教程和书籍

    1.http://goanna.cs.rmit.edu.au/~gl/teaching/Interactive3D/

  9. SQL join的介绍

    学员表 SELECT * FROM tb_address; SELECT * FROM tb_student 1.JOIN关联两个表数据,将匹配数据展示,数据无匹配值则不展示 注释:INNER JOI ...

  10. vue脚手架 构建豆瓣App 第一天

    课堂笔记: 项目结构分析: 项目入口:index.html(div#app) 全局vue组件:App.vue(template:div#app) 通过相同id的div,index.html与Appvu ...