Javascript 使用多个jquery.ajax（）调用将一个下拉列表的值传递给另一个下拉列表_Javascript_Jquery_Ajax_Jsp

Javascript 使用多个jquery.ajax（）调用将一个下拉列表的值传递给另一个下拉列表

javascript jquery ajax jsp

Javascript 使用多个jquery.ajax（）调用将一个下拉列表的值传递给另一个下拉列表,javascript,jquery,ajax,jsp,Javascript,Jquery,Ajax,Jsp,我对jquery不太熟悉，但在这里我尝试这样做：我试图将一个下拉列表的值传递给另一个下拉列表，以下是jsp： <%@ page language="java" contentType="text/html; charset=ISO-8859-1" import="java.sql.*,com.connection.DBConnection;"%> <!DOCTYPE html> <html> <head> <title>Cou

我对jquery不太熟悉，但在这里我尝试这样做：

我试图将一个下拉列表的值传递给另一个下拉列表，以下是jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    import="java.sql.*,com.connection.DBConnection;"%>
<!DOCTYPE html>
<html>
<head>
<title>Country</title>
<style>
.formContainer {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    border-radius: 15px;
    background-color: #75D1FF;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
} 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="Country.js"></script> 
</head>
<body>
    <div class="formContainer">
        <form action="SampleServlet" method="get">
            <fieldset>
                <label>Country :</label> <select id="countryid" name="country">
                    <option value='select'>Select</option>
                    <%
                        Connection con = DBConnection.getConnection();
                        Statement st = con.createStatement();
                        String sql = "select * from country";
                        ResultSet rs = st.executeQuery(sql);
                        while (rs.next()) {
                    %>
                    <option value='<%=rs.getString(2)%>'><%=rs.getString(2)%></option>
                    <%
                        }
                        rs.close();
                    %>
                </select><br />

                <div class="Stateselect">
                <select id="Stateid">
                </select>       
                </div><br /><br />

                <div class="Cityselect">
                <select id="Cityid" onchange="loadXMLDoc()">
                </select>
                </div><br /><br />

                <div class="Areaselect">
                <select id="Areaid"></select>
                </div><br /><br />

                <div class="buttonsDiv">
                    <button type="submit">Submit</button>
                    <button type="reset">Reset</button>
                </div>

            </fieldset>
        </form>
    </div>
</body>
</html>

问题是，只有第一个ajax调用起作用。其余两个不是。请帮忙。Thanx预先

您在js代码的第一行用下拉列表隐藏了所有div

$(".Stateselect,.Cityselect,.Areaselect").hide();

然后根据div是否隐藏的事实绑定更改事件

if(document.getElementById("Cityid").style.display != "none") {
}

由于div是隐藏的，因此不会执行代码，也不会注册更改事件。我建议重新访问您测试显示属性的if条件，如

if（document.getElementById（“Cityid”）.style.display！=“none”）

删除这些条件，代码就会工作

更新：

因为只有当div可见时才需要运行代码，所以必须更改以下内容

if(document.getElementById("Cityid").style.display != "none") {
        $('#Cityid').change(function() {

进入

这样，change事件总是被绑定的，但是代码只有在div可见时才会被执行

一个下拉列表的完整代码

$('#Cityid').change(function () {
    if (document.getElementById("Cityid").style.display != "none") {
        var country = document.getElementById("country").value;
        var state = document.getElementById("Stateid").value;
        var city = document.getElementById("Cityid").value;
        if ((country != 'select' && state != 'select') && city != 'select') {
            $.ajax({
                url: "CityServlet?country=" + country + "&state=" + state + "&city=" + city,
                // SampleServlet?country=India&state=Telangana&city=Hyderabad&area=Madhapur
                method: "GET",
                type: "html",
                success: function (result) {
                    $(".Areaselect").html(result);
                    $(".Areaselect").show(700);
                }
            });
        } else {
            $(".Areaselect").hide(700);
        };
    }
});

这就是重点。当国家/地区下拉列表更改时，将显示状态下拉列表。如果显示样式不是“无”，则只有代码可以工作。@Karthik您在

Stateselect、stateid

或

Cityselect、cityid

中的ID中是否有错误。。。。等等。隐藏所有类（

.Stateselect、.Cityselect、.Areaselect

）并与ID（

Stateid….etc

）进行比较

$('#Cityid').change(function() {
  if(document.getElementById("Cityid").style.display != "none") {

$('#Cityid').change(function () {
    if (document.getElementById("Cityid").style.display != "none") {
        var country = document.getElementById("country").value;
        var state = document.getElementById("Stateid").value;
        var city = document.getElementById("Cityid").value;
        if ((country != 'select' && state != 'select') && city != 'select') {
            $.ajax({
                url: "CityServlet?country=" + country + "&state=" + state + "&city=" + city,
                // SampleServlet?country=India&state=Telangana&city=Hyderabad&area=Madhapur
                method: "GET",
                type: "html",
                success: function (result) {
                    $(".Areaselect").html(result);
                    $(".Areaselect").show(700);
                }
            });
        } else {
            $(".Areaselect").hide(700);
        };
    }
});