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

<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值