获取select标签选中的值,及简易计算器实现

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_38188047/article/details/100522261

获取select标签选中的值

html:

<select id="select">
	<option>请选择...</option>
	<option value="+">+</option>
	<option value="-">-</option>
	<option value="*">*</option>
	<option value="/">/</option>
</select>

js语法:

获取id var select = document.getElementById(“select”);
获取索引(选择第几个) var index= select.selectedIndex;
获取值(value) select.options[index].value;
获取文本(text) select.options[index].text;

jq语法:

获取索引 $("#select").get(0).selectedIndex;
获取值 $(’#select option:selected’) .val();
获取文本 $(’#select option:selected’) .text();

简易计算器实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//获取值
			var getValue = function(){
				return {
					"first" : document.getElementById("first").value,
					"second" : document.getElementById("second").value,
					"checked" :function(){
						//获取元素
						var select = document.getElementById("select");
						//获取选中的索引
						var index = select.selectedIndex;
						//返回选择的值
						return select.options[index].value;
					},
					"result":document.getElementById("result")
				}
			}
			//计算/赋值
			function calcu(){
				var obj = getValue();
				getValue().result.value = eval(obj.first+obj.checked()+obj.second);
			}
		</script>
	</head>
	<body>
		<p>简易计算器</p>
		<input id="first" />
		<select id="select">
			<option>请选择...</option>
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input id="second" />
		<input id="calcu" type="button" value="计算" onclick="calcu()"/>
		<input id="result" disabled="disabled" />
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_38188047/article/details/100522261
今日推荐