Ajax下拉菜单的有关问题好像永远都解决不了

Ajax下拉菜单的问题好像永远都解决不了 - Web 开发 / Ajax

Java code


<%@ page contentType="text/plain;charset=utf-8" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BookInfo.htm</title>
    <script language="JavaScript">
            var xmlHttp;
            function createXMLHttpRequest() {
                if (window.XMLHttpRequest) {
                   xmlHttp = new XMLHttpRequest();
                } else {
                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }        
            //获取数据的调用函数 
            function Query() {
                var value = myform.users.value;
                alert(value);
                createXMLHttpRequest();        
                xmlHttp.onreadystatechange = getData;
                xmlHttp.open("GET","SearchBook.jsp?value="+value,true);
                xmlHttp.send(null);
            }        
            //回调函数
            function getData() {
                if(xmlHttp.readyState == 4 && xmlHttp.status==200) {
                    document.getElementById('bookinfo').innerHTML = xmlHttp.responseText;
                }            
            }
        </script>
  </head>
  
  <body>
    <h1>实验三下拉菜单示例</h1>
    <form action="myform"> 
     选择图书编号:
    <select name="users" onchange="Query()">
    <option value="1"> 1程序设计 </option>
    <option value="2"> 2网络维护 </option>
    <option value="3"> 3多媒体设计 </option>
    </select>
    </form>
    
    <div id="bookinfo"> </div>   
  </body>
</html>

另个页面代码：

Java code

<%@ page contentType="text/plain;charset=UTF-8"%>
<%@ page language="java"%>
<%    
    out.clear();//清空当前的输出内容（空格和换行符）
    String valueStr = request.getParameter("value");    
    String bookinfo = null;//用于保存详细信息 
    if (valueStr != null) {
        if("1".equals(valueStr)) {
             bookinfo = "bookinfo详细信息1：我是xxxxx！！！！！！！";
        } else if("2".equals(valueStr)) {
             bookinfo = "bookinfo详细信息2：欢迎进入我的空间！！！！";
        } else {
            bookinfo = "bookinfo详细信息3：成功感言！！！！！！！！";
        }
    }    
    //根据是否包含正确内容决定输出的信息 
    if (null != bookinfo) {
        out.println(bookinfo);
    } else {
        out.println("无法或者book详细信息");
    }
%>

------解决方案--------------------
获取select选中的值要循环一下:
function getSeVa(id) {
var objSelect = document.getElementById(id);
var length2 = objSelect.options.length;
var obj = "";
for (var i = 0; i < length2; i++) {
if (objSelect[i].selected == true) {
obj = objSelect.options[i].text;
}
}
return obj;
}
------解决方案--------------------
<select name="users" onchange="Query(this)">

function Query(obj) {
var value = obj.value;
alert(value);

onchange="Query(this)"这个this时指把select这个对象传递进去。
后边的obj就是指这个this对象，即select对象
------解决方案--------------------
这样获取就行了例如

Ajax下拉菜单的有关问题 好像永远都解决不了

相关推荐

Ajax下拉菜单的有关问题好像永远都解决不了