我正在使用ajax,jsp和servlet选择框..我想在第二个依赖下拉列表中显示带复选框的选择框

时间:2016-05-24 13:13:01

标签: jquery ajax jsp servlets

    // 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从index.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);
    }

}

1 个答案:

答案 0 :(得分:0)

在你的循环中附加所有新选项代替:

 $.each(responseJson, function(key, value) {               
      $('<option>').val(key).text(value).appendTo($select);      
 });

试试这个:

$.each(responseJson, function(key, value) {
    $select.append($('<option>', {
         value: key,
         text: value
}));