今天别人问我一个问题

<body>

 <select id="tests" onchange="test()">

 <option >1</option> <option >2</option>

 </select>

 <div id="a" style="display: none">123</div>

 <div id="b" style="display: ">456</div>

 <script type="text/javascript">

 function test(){

 document.getElementById("a").style.display="";

 document.getElementById("b").style.display="none";

 }

 </script>

</body>

要通过选择不同的下拉，显示不同的div。后来我给他改善了下

<html>

<body>

 <select id="tests" onchange="test(this.value)">

 <option value="a">1</option> <option value="b" selected>2</option>

 <select>

 <div id="a" style="display: none">123</div>

 <div id="b" style="display: ">456</div>

 <script type="text/javascript">

 function test(val){

	var divList = document.getElementsByTagName('div');

	for(i=0;i<divList.length;i++){

	        if(divList[i].id==val){

	           divList[i].style.display='block';

	         }

	        else{

	            divList[i].style.display='none';

	        }

	    }

 }

 </script>

</body>

</html>

想了良久才想出来上面的方法

開始总是纠结在option取值上，如今趁这个机会梳理一下

<select id="tests" onchange="test(this.value)">

 <option value="a">1</option>

 <option value="b" selected>2</option>

<select>

先说传值吧，this.value就是选中的那个值，相应上面的语句就是  a,b

var obj=document.getElementById("view");

var selectObj = obj.options[obj.selectedIndex];//获取选中的那个对象

var val = selectObj.text;//获取选中的值   1,2

var trueVal = selectObj.value;//内部值  a,b

假设是jquery 就简单一点了

var txt=$("#test").find("option:selected").text();//1
2

var val=$("#test").find("option:selected").val();//
a  b



select的种种取值的更多相关文章

  1. 浅谈jquery关于select框的取值和赋值

    浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

  2. jquery操作select(选中，取值)

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...

  3. jQuery操作select控件取值和设值

    1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){ $(".selec ...

  4. jquery关于select框的取值和赋值

    jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其中一项时触发      var checkValue ...

  5. jquery操作select(option)的取值,设置和选中

    比如 <select class="selector"> <option value ="volvo">Volvo</option ...

  6. DataTable select根据条件取值

    1.封装独立方法 // 执行DataTable中的查询返回新的DataTable /// </summary> /// <param name="dt">源 ...

  7. easyui 》 radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...

  8. jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...

  9. select取值问题

    全栈攻城狮们给挖了各种坑..其中一个典型是select控件取值.直接上代码: <!DOCTYPE html> <html lang="en"> <he ...

随机推荐

  1. DDL 和DML 区别

    DML(Data Manipulation Language)数据操纵语言: 适用范围:对数据库中的数据进行一些简单操作,如insert,delete,update,select等. DDL(Data ...

  2. Win7 x64安装Paramiko出问题

    今天上午windows下配置paramiko环境时出现问题,随手记录下来.   先说一下我的环境: win7 x64 旗舰版.Python3.5.0.pip8.1.0 pip install para ...

  3. vim的漫漫长征路

    在系统的学习vim之前,先在网上找了些教程大概了解下,因为首先我们要先将vim给用起来,然后在系统的学习过程中不断的充实自己对vim的理解. ----------------------------- ...

  4. Chapter 11 迪米特法则

    迪米特法则也叫最少知识原则:如果两个类不必彼此直接通信,那么这两个类就不应当发生直接的相互作用.如果其中一个类需要调用另一个类的某一个方法的话,可以通过第三者转发这个调用. 迪米特法则首先强调的前提是 ...

  5. c语言memset详解

    void *memset(void *s, int ch, size_t n);(int ch可以是char或int) 将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的 ...

  6. 查看死锁原因 /data/anr/traces.txt

    Android ANR这个错误大家并不陌生,但是从Android 2.2开始出错的ANR信息会自动上传给Google进行系统分析改进,当然了你的应用ANR错误其实保存在一个文件中,在/data/anr ...

  7. ACM比赛（11462 Age Sort)

    You are given the ages (in years) of all people of a country with at least 1 year of age. You know t ...

  8. css之display:inline-block与float区别（可以尝试用一下）

    HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等.详细可参阅W3 ...

  9. 网页制作之html基础学习2-标签

    一.html结构组成 <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> & ...

  10. File 操纵目录

    mkdir()   创建目录 不可及联创建    即父路径中一旦有不存在文件夹  即创建失败 mkdirs() 创建目录,及联创建 list() 列出目录内所包含的文件名(string) listFi ...