js程序下拉框功能,当选择大学下拉框时,隐藏下拉框,将其对应的值,展示到span标签中

你的名字 2022-05-19 23:38 128阅读 0赞

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"%>
    
    <%@ 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" οnchange="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