Question

我正在使用Ajax，Jquery和Jsp练习但是我有一个问题，我想显示嵌套选择，第二个取决于第一个，但是当我在第一个选择中选择时我看不到任何东西。我希望你能帮助我，这是代码：

index.html

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/city.js"></script>
</head>
<body>

    <div id="state">  State
        <select id="state">
            <option id="IT" value="italy" selected="selected">Italy</option>
            <option id="FR" value="france">France</option>
            <option id="SP" value="spain">Spain</option>
        </select>
    </div> 

    <div id="city"> City
        <select id ="city"></select>
    </div>

</body>
</html>

city.js

    $(document).ready(function () {
      $("#state").onchange(function () {
        var state = $("select#state option:selected").val();

        $.ajax({
          type: "POST",
          url: 'jspState.jsp',
          data: {stateName: state},
          success: function (result) {
            $("#city").html(result);
          },
          error: function (e) {
            alert('Errore');
          }
        })
      })
    })

jspState.jsp



    <%@ 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">
<% response.setContentType("text/html");
String state = request.getParameter("stateName");
                            String it = "italy";
                            String fr = "france";
                            String sp = "spain";%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/city.js"></script>
</head>
<body>

    city
        <select id ="city"> <% if (0==it.compareTo(state)) {  %>
            <option  value="palermo">Palermo</option>
            <option  value="roma">Roma</option>
            <option  value="milano">Milano</option>
            <% } if (0==fr.compareTo(state)) { %>       
            <option value="paris">Paris</option>
            <option value="marsille">Marsille</option>
            <option value="nice">Nice</option>
            <% } if (0==sp.compareTo(state)) {  %>
            <option value="madrid">Madrid</option>
            <option value="barcelona">Barcelona</option>
            <option value="sivilla">Sivilla</option>
            <% } %>
        </select>

</body>
</html>

Answer 1

我希望你现在自己想出来（并熟悉帮助你调试此类错误的工具，例如Chrome开发人员工具或类似工具）。

如果您没有：如果您在将网页网址放入Chrome地址栏之前打开Chrome开发者工具，则会在该行上看到错误消息

$("#state").onchange(function () {

在city.js.搜索互联网会显示$("#state").onchange( function(..的语法不正确，您必须改为编写$("#state").on('change',function (..。

如果您将debugger;放在$("#city").html(result);之前，您会发现result不仅包含字符串city <select>..，还包含<body><html>不应包含的字符<div id="city">由<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/city.js"></script> </head> <body> <div id="state"> State <select id="state"> <option id="IT" value="italy" selected="selected">Italy</option> <option id="FR" value="france">France</option> <option id="SP" value="spain">Spain</option> </select> </div> <div id="city"> City <select id ="city"></select> </div> </body> </html>元素。

我现在附上更正后的代码：

的index.html

$(document).ready(function (ev1) {
  //syntax corrected
  $("#state").on('change',function (ev2) {

    var state = $("select#state option:selected").val();
    $.ajax({
      type: "POST",
      url: 'jspState.jsp',
      data: {stateName: state},
      success: function (result) {
        debugger;
        $("#city").html(result);
      },
      error: function (e) {
        alert('Errore');
      }
    })
  })
})

city.js

<html><body>

jspState.jsp（删除了所有<%@ 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"> <% response.setContentType("text/html"); String state = request.getParameter("stateName"); String it = "italy"; String fr = "france"; String sp = "spain";%> City: <select id ="city"> <% if (0==it.compareTo(state)) { %> <option value="palermo">Palermo</option> <option value="roma">Roma</option> <option value="milano">Milano</option> <% } if (0==fr.compareTo(state)) { %> <option value="paris">Paris</option> <option value="marsille">Marsille</option> <option value="nice">Nice</option> <% } if (0==sp.compareTo(state)) { %> <option value="madrid">Madrid</option> <option value="barcelona">Barcelona</option> <option value="sivilla">Sivilla</option> <% } %> </select>个标签）

{{1}}

Jquery Ajax请求和Jsp响应

1 个答案: