今天别人问我一个问题

<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. 我的cocos2d-x集成sharesdk之旅(转)

    链接地址:http://blog.csdn.net/yeungxuguang/article/details/18227153 本文出自:http://www.iteye.com/topic/1130 ...

  2. POJ 1458 最长公共子序列 LCS

    经典的最长公共子序列问题. 状态转移方程为 : if(x[i] == Y[j]) dp[i, j] = dp[i - 1, j - 1] +1 else dp[i, j] = max(dp[i - 1 ...

  3. Chapter 12 外观模式

    外观模式:为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个模式使得这一子系统更加容易使用. 外观模式三个阶段: 首先,在设计初期阶段,应该要有意识的将不同的两个层分离. 其次,在 ...

  4. 用nohup执行python程序时，print无法输出

    python -u参数:关闭输出缓冲 nohup python -u test.py > nohup.out 2>&1 &

  5. perl 安装 ZooKeeper模块

    1072 ./configure --libdir=/usr/lib 1073 make 1074 make install 1075 cpan ZooKeeper [root@wx03 c]# pe ...

  6. Android蓝牙A2dp profile的使用

    A2dp profile是android支持的一种蓝牙情景模式,一般用于蓝牙立体声耳机,即蓝牙音频的输出 在android的app层中,A2dp的使用并不是很开放,api只提供了非常少的操作接口,连基 ...

  7. Java进阶04 RTTI

    链接地址:http://www.cnblogs.com/vamei/archive/2013/04/14/3013985.html 作者:Vamei 出处:http://www.cnblogs.com ...

  8. cocos2d-x中文显示：加字库

    1.如下:为了中文显示 2.如下:解决方案-加入中文字库

  9. UISearchBar控件

    摘自:http://blog.sina.com.cn/s/blog_7b9d64af0101dfg8.html UISearchBar控件就是要为你完成搜索功能的一个专用控件.它集成了很多你意想不到的 ...

  10. SuperSocket源码解析之消息处理

    一 简述 Tcp消息的处理本身是与Tcp消息传输过程独立的,是消息的两个不同阶段,从前面的会话生命周期我们已经知道消息的传输主要有SocketSession实现,而真正处理则交由AppSession实 ...