今天别人问我一个问题

<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. BZOJ 2718: [Violet 4]毕业旅行( 最长反链 )

    一不小心速度就成了#1.... 这道题显然是求最长反链, 最长反链=最小链覆盖.最小链覆盖就是先做一次floyd传递闭包, 再求最小路径覆盖. 最小路径覆盖=N - 二分图最大匹配. 所以把所有点拆成 ...

  2. [转] 8张图学习javascript

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...

  3. form的验证用法

    models.py forms.py html页面 第二种方法: 不继承model直接自定义内容 获得内容: if form.is_valid():            price = reques ...

  4. javaScript 网页特效 输出语句

    大家好,我是小强老师,今天主要讲解 三个最为常用的输出语句.  alert() 弹出警示框 window.alert(‘继续学习’);  完整的写法 效果如下: 因为alert 属于window 对象 ...

  5. Android 代码设置密码输入框内容的显示/隐藏

    //内容可见 mEtPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance()); //内容不可见 m ...

  6. 一步一步重写 CodeIgniter 框架 (12) —— 代码再重构，回归 CI

    第一课中搭建的基本的 框架模型, 只有一个 index.php 作为执行文件,按这种方式最不稳定的因素就是路径的问题. 我们经常需要通过合适的参数,比如 load_class('output') 或 ...

  7. Android的BUG（三） - 广为人知的诟病：频繁重启问题

    使用过Android的同学,尤其是用过山寨pad,应该对Android的重启问题印象深刻吧.Android由于其设计的复杂性,可能会使得系统在不经意时陷入异常状态,因此Android设计了一套看门狗机 ...

  8. 高级UIKit-03(NSFileManager、NSFileHandle)

    fileManager文件管理器 [day04_1_FileManager_Search] :查找文件 fileManager有一个方法可以判断文件是否是文件夹, fileExistsAtPath:i ...

  9. django局域网建一个网站

    之前总是运行的python manage.py runserver,用默认的在本机访问的127.0.0.1:8000,如果跟几个同学一起去开发一个网站来玩玩的话,可以这样: python manage ...

  10. lokijs

    http://lokijs.org/#/ 500,000+ 1.1M ops/s. A fast, in-memory document-oriented datastore for node.js, ...