// index.jsp
> this is index.jsp file which contains 2 dropdown after selection of country i want to show states with checkbox having problem in this code ...... select with checkbox in state dropdown not showing states may be there is problem with jquery
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "n";
});
alert(message);
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#country').change(function(event) {
var $country=$("select#country").val();
$.get('ActionServlet',{countryname:$country},function(responseJson) {
var $select = $('#lstFruits');
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
});
});
</script>
</head>
<body>
<h4>AJAX calls to Servlet using JQuery and JSON</h4>
Select Country:
<select id="country">
<option>Select Country</option>
<option value="India">India</option>
<option value="US">US</option>
</select>
<select multiple="multiple" id="lstFruits">
<option >Select SubCategory</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />
</body>
</html>
/Action servlet
从索引获取请求的操作 Servlet.jsp并以 JSON 形式的响应 状态部分复选框中的动态依赖选择框不起作用 任何人都可以告诉我其中有什么问题
package com;
import com.google.gson.Gson;
import java.io.IOException;
import java.util.LinkedHashMap;
import java.util.Map;
/**
* Servlet implementation class ActionServlet
*/
@WebServlet("/ActionServlet")
public class ActionServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ActionServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String country=request.getParameter("countryname");
System.out.println(country);
Map<String, String> ind = new LinkedHashMap<String, String>();
ind.put("1", "New delhi");
ind.put("2", "Tamil Nadu");
ind.put("3", "Kerala");
ind.put("4", "Andhra Pradesh");
Map<String, String> us = new LinkedHashMap<String, String>();
us.put("1", "Washington");
us.put("2", "California");
us.put("3", "Florida");
us.put("4", "New York");
String json = null ;
if(country.equals("India")){
json= new Gson().toJson(ind);
}
else if(country.equals("US")){
json=new Gson().toJson(us);
}
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
在循环中附加所有新选项来代替：
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
试试这个：
$.each(responseJson, function(key, value) {
$select.append($('<option>', {
value: key,
text: value
}));