select的种种取值

今天别人问我一个问题

<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的种种取值

最新文章

热门文章