Javascript 无法从下拉列表中选择特定值
我有两个下拉列表,第一个使用DOM解析器和JSTL填充。根据第一个下拉列表的值,将填充第二个下拉列表,我已经使用jQuery和ajax完成了这项工作。我可以看到第二个下拉列表的内容/项目,但除了默认项目外,我无法选择任何其他项目 这是我的servlet:Javascript 无法从下拉列表中选择特定值,javascript,jquery,ajax,jsp,dropdown,Javascript,Jquery,Ajax,Jsp,Dropdown,我有两个下拉列表,第一个使用DOM解析器和JSTL填充。根据第一个下拉列表的值,将填充第二个下拉列表,我已经使用jQuery和ajax完成了这项工作。我可以看到第二个下拉列表的内容/项目,但除了默认项目外,我无法选择任何其他项目 这是我的servlet: package report; import java.io.IOException; import java.util.ArrayList; import javax.servlet.ServletException; import ja
package report;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
/**
* Servlet implementation class ServiceToFetchSubType
*/
public class ServiceToFetchSubType extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ServiceToFetchSubType() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String value=request.getParameter("name");
System.out.println("The Value is: "+value);
ArrayList<String> arrayList = new ArrayList<String>();
if(value.equals("Superman"))
{
arrayList.add("Doomsday");
arrayList.add("Darkseid");
arrayList.add("Lex Luthor");
/*request.setAttribute("arry", arrayList);
request.getRequestDispatcher("Welcome.jsp").forward(request, response);*/
}
String json = new Gson().toJson(arrayList);
response.setContentType("application/json");
response.getWriter().write(json);
}
}
这是我的jsp:
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown").click(function (event) {
var name = $("#doctype").val();
$.ajax({
url: 'ServiceToFetchSubType',
data: { name: name },
type: 'post',
cache: false,
success: function (response) {
var select = $('#docsubtype');
select.find('option').remove();
$.each(response, function (index, value) {
$('<option>').val(value).text(value).appendTo(select);
});
callback.apply(select);
}
});
});
});
</script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="content">
<div class="inner">
<h1>Drop Down Menu</h1>
<div class="dropdown">
<select name="doctype" id="doctype" class="my_dropdown" style="color: white; background: #655D78">
<option disabled="disabled" selected="selected">Select Doc Type</option>
<c:foreach items="${bt}" var="doctypes">
<option><c:out value="${doctypes}"/></option>
</c:foreach>
</select>
</div>
<div class="dropdown">
<select name="doctype" id="docsubtype" class="my_dropdown" style="color: white; background: #655D78">
<option disabled="disabled" selected="selected">Select Doc SubType</option>
<option></option>
</select>
</div>
</div>
</div>
</header>
<!-- Main -->
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Design: Content Management OPS</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
我对jQuery和Ajax非常陌生,因此任何帮助都将不胜感激。
谢谢 第一个选择的名称=doctype id=doctype第二个选择的名称=doctype id=docsubtype两个名称相同。名称参数应该是不同的。如果您希望对名称值进行数组,请使用name=doctype[]是,但我认为jQuery不能与“id”一起使用,因此,如果我没有错,则具有相同的属性并不重要。您的selects类是my_下拉列表,但您的onclick函数是在下拉列表中触发的,并且您不希望在第二个下拉列表中触发相同的函数,它将重复更新第二个下拉列表,您将无法获得结果。更改第二个下拉列表的类名,单击时单独处理。@pokeybit是的,非常感谢!两个下拉列表的类名相同,因此发生冲突!我已经修好了,现在很好用