js程序 下拉框功能,当选择大学下拉框时,隐藏下拉框,将其对应的值,展示到span标签中
知识点:
获得下拉框中的值和内容
//javascript原生的方法 获取下拉框中的值和内容
var myselect=document.getElementById("checkType");
var index=myselect.selectedIndex ;
//拿到选中项options的value
var v = myselect.options[index].value;
//拿到选中项options的text
var t = myselect.options[index].text;
//使用jQuery(需导入)获取选中的项
var option=$("#checkType option:selected");
option.val();//获得选中项的值
option.text();//获得选中项的内容将span标签设置显示或隐藏
document.getElementById("checkTypeInfo").style.display="";
document.getElementById("checkTypeInfo").style.display="none";给span标签赋值
document.getElementById("checkTypeInfo").innerHTML = option.val();页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--导入js运行类库-->
<%@ include file="/back_page/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<select id="checkType" onchange="changeCheckType();">
<option value="00">请选择</option>
<option value="02">小学</option>
<option value="03">中学</option>
<option value="04">大学</option>
</select>
<span id="checkTypeInfo" style="display:none;">1243</span>
<script type="text/javascript">
//调用onchange事件
function changeCheckType(){
//使用jQuery(需导入)获取选中的项
var option=$("#checkType option:selected");
alert(option.text()); //获取选中项的 内容
if(option.val() == 04){ //option.val() 选中项的值
$("#checkType").hide();
//给span标签赋值
document.getElementById("checkTypeInfo").innerHTML = option.val();
//将span标签设置成可见
document.getElementById("checkTypeInfo").style.display="";
};
//
}
//页面加载完毕事件
$(function(){
//javascript原生的方法 获取下拉框中的值和内容
var myselect=document.getElementById("checkType");
var index=myselect.selectedIndex ;
//拿到选中项options的value
var v = myselect.options[index].value;
//拿到选中项options的text
var t = myselect.options[index].text;
//alert(v);
//alert(t);
});
</script>
</body>
</html>自定义的js运行类库的页面(直接在jsp页面上使用<%@ include file=”/back_page/head.jsp” %>导入即可)
模板代码
/back_page/head.jsp
<link href="/res/itcast/css/admin.css" rel="stylesheet" type="text/css"/>
<link href="/res/common/css/theme.css" rel="stylesheet" type="text/css"/>
<link href="/res/common/css/jquery.validate.css" rel="stylesheet" type="text/css"/>
<link href="/res/common/css/jquery.treeview.css" rel="stylesheet" type="text/css"/>
<link href="/res/common/css/jquery.ui.css" rel="stylesheet" type="text/css"/>
<!-- <script src="/thirdparty/ckeditor/ckeditor.js" type="text/javascript"></script> -->
<!-- <script src="/thirdparty/My97DatePicker/WdatePicker.js" type="text/javascript"></script> -->
<script type="text/javascript" src="/res/fckeditor/fckeditor.js"></script>
<script src="/res/common/js/jquery.js" type="text/javascript"></script>
<script src="/res/common/js/jquery.ext.js" type="text/javascript"></script>
<script src="/res/common/js/jquery.form.js" type="text/javascript"></script>
<script src="/res/common/js/itcast.js" type="text/javascript"></script>
<script src="/res/itcast/js/admin.js" type="text/javascript"></script>
<link rel="stylesheet" href="/res/css/style.css" />
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>