浏览 9466 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2006-11-19
用jQuery来实现二级联动下拉框
下面是index.jsp的内容 <html> <head> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/custom.js" type="text/javascript"></script> </head> <body> <div align="center"> <form name="form1" method="post" action=""> <TABLE width="70%" boder="0" cellspacing="0"> <TR> <TD align="center">Double Select Box</TD> </TR> <TR> <TD><SELECT name="hero" id="hero"> <OPTION value="0">Unbounded</OPTION> <OPTION value="1">D.K.</OPTION> <OPTION value="2">NEC.</OPTION> <OPTION value="3">BOSS</OPTION> </SELECT> <SELECT name="skill" id="skill"> <OPTION value="0">Unbounded</OPTION> </SELECT></TD> </TR> <TR> <td> </td> </TR> </TABLE> </form> </div> </body> </html> 下面是js的代码 $(document).ready(function() {
$("#hero").change(function() {
//send requests
var option1 = "<OPTION value='";
var option2 = "'>";
var option3 = "</OPTION>";
$.post("/first/select", {id: $("#hero").val()}, function(xml) {
$("selects", xml).find("select", xml).each(function() {
var value = $("value", xml).text();
var text = $("text", xml).text();
$("#skill").append(option1 + value + option2 + text + option3);
alert($("#skill").html());
});
});
});
});
最后是servlet的代码 public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String targetId = request.getParameter("id").toString();
System.out.println(targetId);
String xml_start = "<selects>";
String xml_end = "</selects>";
String xml = "";
if (targetId.equalsIgnoreCase("0")) {
xml = "<select><value>0</value><text>Unbounded</text></select>";
} else if (targetId.equalsIgnoreCase("1")) {
xml = "<select><value>1</value><text>Mana Burn</text></select>";
xml += "<select><value>2</value><text>Death Coil</text></select>";
xml += "<select><value>3</value><text>Unholy Aura</text></select>";
xml += "<select><value>4</value><text>Unholy Fire</text></select>";
} else if (targetId.equalsIgnoreCase("2")) {
xml = "<select><value>1</value><text>Corprxplode</text></select>";
xml += "<select><value>2</value><text>Raise Dead</text></select>";
xml += "<select><value>3</value><text>Brilliance Aura</text></select>";
xml += "<select><value>4</value><text>Aim Aura</text></select>";
} else {
xml = "<select><value>1</value><text>Rain of Chaos</text></select>";
xml += "<select><value>2</value><text>Finger of Death</text></select>";
xml += "<select><value>3</value><text>Bash</text></select>";
xml += "<select><value>4</value><text>Summon Doom</text></select>";
}
String last_xml = xml_start + xml + xml_end;
response.getWriter().write(last_xml);
}
为什么我用循环每次取得的都servlet里面selects里面全部value的值，text也是全部的值。是我js里面的循环写得有问题吗？还有就是option1和option2总是append不进去 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
