首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

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

2012-02-09 
Ajax下拉菜单的问题 好像永远都解决不了 - Web 开发 / AjaxJava code%@ page contentTypetext/plainch

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对象
[解决办法]
这样获取就行了例如


function display()//这里就可以获取啊
{
var index=document.myform.myselect.selectedIndex;
alert(index);
alert(document.myform.myselect.options[index].value);
}
</script>
</head>
<body>
<h1> 搜索真正的房产信息表 </h1>
<form action= "# " name= "myform ">
Show listings from
<select name=myselect onchange= "display() ">
<option value= "5000 "> $50,000 </option>
<option value= "100000 "> $100,000 </option>
<option value= "150000 "> $150,000 </option>
</select>
to
<select>
<option value= "100000 "> $100,000 </option>
<option value= "150000 "> $150,000 </option>
<option value= "200000 "> $200,000 </option>
</select>
<input type= "button " value= "搜索 " onclick= "startRequest() " />
</form>
<span id= "header ">
</span>
<table id= "resultTable " width= "75% " border= "0 " >
<tbody id= "resultBody ">
</tbody>
</table>
</body>
</html>

获取的是value 并非TEXT
[解决办法]

CSS code
function Query(value) {                var value = myform.users.value;                alert(value);                createXMLHttpRequest();                        xmlHttp.onreadystatechange = getData;                xmlHttp.open("GET","SearchBook.jsp?value="+value,true);                xmlHttp.send(null);            }   <select name="users" onchange="Query(this.value)"> 就可以得到值了 

热点排行