版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
获取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>