select的option属性value以及text值的获取操作

最新推荐文章于 2024-06-25 03:04:29 发布

微枫1993

最新推荐文章于 2024-06-25 03:04:29 发布

阅读量3.2k

点赞数

分类专栏： web前端文章标签： javascript jquery select option

本文链接：https://blog.csdn.net/xiongqiangwin1314/article/details/47170603

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<style type="text/CSS">
		</style>
	</head>
	<body>
		<select id="publish">
			<option value="1">what is this</option>
			<option value="2">this is select</option>
			<option value="3">oh,thanks</option>
			<option value="4">you are welcome</option>
		</select>
		<div id="testDiv"></div>
		
		<script type="text/JavaScript" src="publicJQuery/jquery-2.1.4.js"></script>
		
		<script type="text/JavaScript">
			function getSelected(){
				var option=document.getElementById('publish').value;//有value就得到value(1,2,3,4)，没有就得到选项值(what is this ...)
				var obj=document.getElementById('testDiv');
				obj.innerText=option;
			}
			
			
			/* 通过option直接取得值*/
			function getSelectedTwo(){
				var options=document.getElementsByTagName('option');
				var obj=document.getElementById('testDiv');
				for(var i=0; i<options.length; i++){
					if(options[i].selected==true){
						obj.innerText="value值为："+options[i].value+"。text值为："+options[i].text;//options[i].innerText也可以
					}
				}
			}
			
			
			/* 通过索引值selectedIndex来取得值*/
			function getSelectedThree(){
				var select=document.getElementById('publish');
				var selectedIndex=select.selectedIndex;
				//alert(selectedIndex);//索引为0123
				var obj=document.getElementById('testDiv');
				obj.innerText="value值为："+select.options[selectedIndex].value+"。text值为："+select.options[selectedIndex].text;
			}
			
			
			/* 
				jQuery用法，为什么用的是val()跟text()，因为jQuery是js库，所以这里的val()跟text()是调用的方法，
				上面的原生的js的value跟text是原生js的属性。
			*/
			function getSelectedFour(){
				var selected=$("#publish option:selected");
				var value=selected.val();
				var text=selected.text();
				var obj=document.getElementById('testDiv');
				obj.innerText="value值为："+value+"。text值为："+text;
			}
			
			document.getElementById('publish').οnclick=getSelectedFour;
			
			
			
		</script>
	</body>
</html>