JSP动态获取select内容（二）：结合javascript+ajax获取

在上一篇文章中，介绍了直接获取的方法，代码少、易上手，但存在诸多弊端，尤其是在安全性方面。所以，这篇文章将向大家介绍另一种较为良好的方法。

在java web开发中，会遇到多标签联动的情况，例如，根据第一个select所选的值，动态改变下一个select的内容。

下面的例子将给大家介绍如何实现select的内容随另一个select的值进行变化。

1. 首先，在jsp页面中放入第一个select标签和span标签，span标签中的内容可为空 也可为select的初始化样式。（例子中 span标签中内容为初始化状态）如下图：

<select name="selectdemo1" id="selectdemo1" onclick="show(this.value)>
    <option value="0" selected="selected">请选择1</option>
    <option value="1" selected="selected">苹果</option>
    <option value="2" selected="selected">西瓜</option>
</select>

<span id="txtHint">
    <select name="selectdemo2" id="selectdemo2" >
	<option value="0" selected="selected">请选择</option>
    </select>
</span>

注意：第一个select标签中要加入onclick方法，方法也在JavaScript中。

 

2.加入JavaScript代码段，如下图：

function show(str)//txtHint是前端中span标签的id
        {
            var xmlhttp;
            if (str=="")
            {
                document.getElementById("txtHint").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","要跳转的后台.jsp?参数="+str,true);
            xmlhttp.send();

            var html = document.getElementById("txtHint").innerHTML;
            document.getElementById("txtHint").innerHTML=html+xmlhttp.responseText;
        }

3. 后台处理的文件，我的文件为***.jsp

<%String chooseIns = request.getParameter("JavaScript中的参数名");
    if(chooseIns!=null){
        String courseSql = "select *** from ** where ** =**";//自己构造sql语句
        try{
            Class.forName("com.mysql.jdbc.Driver");
            Connection cn = DriverManager.getConnection(数据库URL, 用户名, 密码);//链接数据库的常规操作
            Statement ps = cn.createStatement();
            ResultSet rs = ps.executeQuery(courseSql);
            out.println("<select name='selectdemo' id='selectdemo' >");
            out.println("<option value='"+0+"'> "+"请选择"+"</option>");
            while(rs.next()){
                out.println("<option value='"+rs.getString(1)+"'> "+rs.getString(1)+"</option>");
            }
            out.println("</select><br>");
        }catch(Exception e){}
    }
%>

到这里，功能就基本实现了。在选择完第一个select中的内容后，第二个select的内容也会随之改变。

注意：1. 确保开发软件正确安装相关组件，如果未能正常列出数据，请先检查组件完整性，参考这篇文档：                          https://blog.csdn.net/qq_35767233/article/details/86535107   

（第一次我就因为没有检查jQuery的完整性，所以调试很久都没有成功）

           2. 确保数据库的连接正常和SQL语句的语法正确。